javascript - jQuery - 使用 Bootstrap 时不会触发更改

Question

我有一个计算器，它在我的选择上使用 Bootstrap 以及此扩展:http://silviomoreto.github.io/bootstrap-select/

我在选项中有不同的文本，但值可以与代表所选商品的价格相同。

<select>
  <option value="0">Red</option>
  <option value="0.23">Green</option>
  <option value="0.23">Blue</option>
</select>

我的问题是，当值相同时，jQuery 不会触发更改事件。如果值不同，它就可以正常工作。我想我可以制作自己的事件监听器，测试文本字符串，但我该怎么做呢？或者谁有更好的主意？

Answer 1

您可以使用的解决方法是使用数据属性。将您的选择更改为如下所示

<select>
  <option data-value="0" value='Red'>Red</option>
  <option data-value="0.23" value='Green'>Green</option>
  <option data-value="0.23" value='Blue'>Blue</option>
</select>

然后绑定(bind)更改

$('select').on('change', function(){
    var val = $(this).data('value');
});

这样就触发了change事件，只需通过data属性获取值即可。