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

Question

问题：如何更改 Span 类与选择字段选项属性匹配的 Span 内的文本？并且还使其灵活，这样我就不需要对所有属性和跨类进行硬编码？

我想我需要一些解决方案，其中 JS 函数搜索跨度类并将其与选项属性进行匹配，如果存在匹配，则应更新跨度文本。

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

<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，其中 span 需要根据与 span 类匹配的选项属性进行更改

<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 函数来搜索选项属性并搜索“.conditional-element-1”内的跨度类如果存在匹配，则更新范围文本。我还需要能够添加更多属性和跨度。

$('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 以使其有效 - 最好使用数据属性来存储体重、尺寸和人员等信息。此外，保持此解决方案动态更容易，因为它从所选选项中读取所有属性，并在属性名称以“data”开头的情况下附加它们的值。$(document).ready(function() {&nbsp; &nbsp;$('select.conditional-element-selector').on('change', function() {&nbsp; &nbsp; &nbsp; var targetIndex = this.selectedIndex;&nbsp; &nbsp; &nbsp; var selected = $(this).children("option:selected");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(selected).each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(this.attributes, function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (this.name.startsWith("data")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var attrName = this.name.substr(5);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('.conditional-element-' + targetIndex).find("." + attrName).text(this.value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp;});});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select class="conditional-element-selector">&nbsp; <option>Please select</option>&nbsp; <option value="select-element-1" data-weight="12" data-size="20" data-persons="10">Option 1</option>&nbsp; <option value="select-element-2" data-weight="24" data-size="40" data-persons="20">Option 2</option>&nbsp; <option value="select-element-3" data-weight="48" data-size="80" data-persons="40">Option 3</option></select><div class="conditional-element-1">&nbsp; <ul><li><span class="weight"></span> kg</li><li><span class="persons"></span></li><li><span class="size"></span> m3</li>&nbsp; </ul></div><div class="conditional-element-2">&nbsp; &nbsp;<ul><li><span class="weight"></span> kg</li><li><span class="persons"></span></li><li><span class="size"></span> m3</li>&nbsp; </ul></div><div class="conditional-element-3">&nbsp; &nbsp;<ul><li><span class="weight"></span> kg</li><li><span class="persons"></span></li><li><span class="size"></span> m3</li>&nbsp; </ul></div>