Изменить диапазон значений текста, где класс соответствует атрибуту опции выбора поля

Question

Вопрос: Как я могу изменить текст внутри диапазона, где класс диапазона соответствует атрибуту выбора поля выбора? А также сделать его гибким, чтобы мне не нужно было жестко кодировать все атрибуты и классы span?

Мне кажется, мне нужно какое-то решение, где функция JS ищет и сопоставляет классы span с атрибутами option, и если есть совпадение, диапазон текста должен быть обновлен.

Демо-поле выбора с атрибутами опции

<select class="conditional-element-selector">
    <option value="select-element-1" weight="12" size="20" persons="10">Option 1</option>
    <option value="select-element-2" weight="24" size="40" persons="20">Option 2</option>
    <option value="select-element-3" weight="48" size="80" persons="40">Option 3</option>
</select>

Демо HTML, где диапазон должен изменяться в зависимости от атрибута опции, соответствующего классу диапазона

<div class="conditional-element-1">   
    <li>Weight: <span class="weight">12</span> kg </li>
    <li>Persons: <span class="persons">10</span></li>
    <li>Size: <span class="size">20</span> m3 </li>
</div>

JS функцию, которую я хочу создать для поиска атрибута опции и поиска класса span внутри «.conditional-element-1» и, если есть совпадение, обновите текст span. Мне нужно иметь возможность добавлять больше атрибутов и промежутков.

$('select.conditional-element-selector').on('change', function() {
  var targetIndex = this.selectedIndex + 1; // This looks at which option is selected
  $('.conditional-element-' + targetIndex).... // This is unfinshed 

// Extend function here to match different span classes with different option attributes and change span text 

});

Answer 1

Я изменил ваш HTML, чтобы он был действительным - лучше использовать атрибуты данных для хранения информации, такой как вес, размер и люди. Кроме того, это решение легче сохранять динамическим c, так как оно считывает все атрибуты из выбранной опции и добавляет их к значению, если имя атрибута начинается с «data».

$(document).ready(function() {
   $('select.conditional-element-selector').on('change', function() {
      var targetIndex = this.selectedIndex;
      var selected = $(this).children("option:selected");
         $(selected).each(function() {
            $.each(this.attributes, function() {
             if (this.name.startsWith("data")) {
               var attrName = this.name.substr(5);
               $('.conditional-element-' + targetIndex).find("." + attrName).text(this.value)
             }
            });
         });
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="conditional-element-selector">
  <option>Please select</option>
  <option value="select-element-1" data-weight="12" data-size="20" data-persons="10">Option 1</option>
  <option value="select-element-2" data-weight="24" data-size="40" data-persons="20">Option 2</option>
  <option value="select-element-3" data-weight="48" data-size="80" data-persons="40">Option 3</option>
</select>
<div class="conditional-element-1">
  <ul>
<li><span class="weight"></span> kg</li>
<li><span class="persons"></span></li>
<li><span class="size"></span> m3</li>
  </ul>
</div>
<div class="conditional-element-2">
   <ul>
<li><span class="weight"></span> kg</li>
<li><span class="persons"></span></li>
<li><span class="size"></span> m3</li>
  </ul>
</div>
<div class="conditional-element-3">
   <ul>
<li><span class="weight"></span> kg</li>
<li><span class="persons"></span></li>
<li><span class="size"></span> m3</li>
  </ul>
</div>