Javascript 更改类与“选择字段”选项的属性匹配的文本值范围

问题：如何更改span类与“选择字段选项”属性匹配的span内的文本？并且使它灵活，所以我不需要硬编码所有的属性和跨类

我想我需要一些解决方案，其中JS函数搜索并匹配带有选项属性的span类，如果存在匹配，则应更新span文本

演示带有选项属性的选择字段

---

为了有效，我更改了HTML——最好使用数据属性来存储体重、大小和人员等信息。此外，更容易保持此解决方案的动态性，因为它从所选选项中读取所有属性，并在属性名称以数据开头时将其附加值

$document.readyfunction{ $'select.conditional element selector'。关于'change'，函数{ var targetIndex=this.selectedIndex； var selected=$this.childrenoption:selected； $selected.eachfunction{ $.eachthis.attributes，函数{ 如果this.name.startsWithdata{ var attrName=this.name.substr5； $'.conditional元素-'+targetIndex.find.+attrName.textthis.value } }; }; }; }; 请选择 选择1 选择2 选择3 公斤 m3 公斤 m3 公斤 m3

---

非常感谢！！在这个解决方案中，我唯一缺少的是它输出一个ul/li，我希望JS函数在其中搜索span类，如果它存在，则数据属性与span类匹配，只更改span文本。通过这种方式，我可以更改列表项的顺序，例如更改html，而不依赖于JS函数。你认为你也可以帮我吗？你是说已经存在的、没有动态添加的、具有类权重、大小和人员的跨度吗？li标签也已经在那里了吗？@Bob我刚刚更新了我的答案，希望它现在合适。@Bob很高兴我能提供帮助：

<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>

<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>

$('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 

});