jQuery - 如何根据另一个选项的值将数据值分配给一个选项？答案

【问题标题】：jQuery - How do I assign data-values to an option based on the value of another option?jQuery - 如何根据另一个选项的值将数据值分配给一个选项？
【发布时间】：2023-03-13 03:38:01
【问题描述】：

我正在寻找基于变量编写 jQuery 的 sn-p，但我不确定解决这个问题的最佳方法。

我有两个选择字段，第一个有带值的选项，第二个有带数据值的选项。根据在第一个选择字段中选择的选项/值，我需要在第二个字段的选项中动态更新数据值。

我的 HTML 是：

<select required="" name="options" id="cab" class="select-model">
    <option selected="" data-value="0" disabled="disabled"></option>
    <option data-value="500" value="1" class="one">1x12 Cabinet</option>
    <option data-value="1000" value="2">2x12 Cabinet</option>
    <option data-value="1500" value="3">3x15 Cabinet</option>
    <option data-value="0" value="0">No cabinet</option>
</select>

<select required="" name="options" id="speaker" class="select-model">
    <option selected="" data-value="0" disabled="disabled"></option>
    <option data-value="0">Celestion</option>
    <option data-value="100" class="widow">Black Widow</option>
</select>

<var class="total">0</var>

而我目前的 jQuery sn-p 是：

$("#cab").on('change', function () { 
    $("#cab").prop($(this).val() == "1x12 Cabinet");
    $(".widow").attr('data-value', 100);        
});

这很好，但我需要分配一个变量，以便黑寡妇的数据值为：

当在#cab 中选择 value=2 时乘以 2（或设置为 200）
当在#cab 中选择 value=3 时乘以 3（或设置为 300）

等等……

我已经尝试过创建一个 var 映射，但恐怕我的 jQuery 还不够好！

任何帮助都会很棒！ Here's a link to a jsFiddle

【问题讨论】：

$("#cab").prop($(this).val() == "1x12 Cabinet"); 不是一种无所事事的漫长而低效的方式吗？您是否打算设置一些属性？

标签： jquery select option

【解决方案1】：

$("#cab").on('change', function () { 
    var value = $(this).find('option:selected').val();
    $(".widow").attr('data-value', value * 100);
});

希望对您有所帮助！在这里更新小提琴http://jsfiddle.net/aKkej/5/

【讨论】：

绝对正是我想要的。抱歉，如果我让这个问题有点棘手，发现这很难解释。再次感谢！
你也可以使用 $(".widow").data("value") = value *100;尽管 $(".widow").attr('data-value', value * 100);