javascript - 根据属性更改选择选项

Question

我正尝试在单击 时更改选择选项，但我不想使用选项值。如果我给我的按钮一个 value='3'，我的代码就可以工作，但我想要的是选择带有 data-price="0" 的那个，在我的例子中是带有 value='3' 的那个。

JS:

jQuery(document).ready(function () {
    jQuery('#sample-addtocart-button').click(function(){
        jQuery('.product-custom-option').val(jQuery(this).attr('value'));
    });
});

HTML :

<button value="0" id="sample-addtocart-button" type="button">Free</button>

<select class="product-custom-option">
    <option value="">-- Please Select --</option>
    <option data-price="10" value="1">£10.00</option>
    <option data-price="20" value="2">£20.00</option>
    <option data-price="0" value="3">FREE</option>
</select>

任何帮助将不胜感激

Answer 1

您可以使用 attribute equals selector获取选项，然后通过使用 prop() 设置 selected 属性来选择选项 方法。

jQuery(document).ready(function() {
  jQuery('#sample-addtocart-button').click(function() {
    jQuery('.product-custom-option option[data-price="' + jQuery(this).attr('value') + '"]').prop('selected', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="0" id="sample-addtocart-button" type="button">Free</button>

<select class="product-custom-option">
  <option value="">-- Please Select --</option>
  <option data-price="10" value="1">£10.00</option>
  <option data-price="20" value="2">£20.00</option>
  <option data-price="0" value="3">FREE</option>
</select>