jQuery-如何根据另一个选项的值为一个选项分配数据值？

我想写一段基于变量的jQuery代码，但我不确定解决这个问题的最佳方法

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

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

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

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

等等

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

任何帮助都会很好

---

希望这有帮助！这里更新的小提琴不是

$（“#cab”）.prop（$（this.val（）==“1x12橱柜”）一种漫长而低效的无所事事方式？你打算设置一些财产吗？绝对正是我想要的。抱歉，如果我把问题弄得有点棘手，我发现这很难解释。再次感谢！您还可以使用$（“.widow”）.data（“value”）=value*100；美元（“.widow”）.attr（'data-value'，value*100）；
$("#cab").on('change', function () { 
    $("#cab").prop($(this).val() == "1x12 Cabinet");
    $(".widow").attr('data-value', 100);        
});

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