根据属性更改选择选项

Question

我正在尝试更改一个select optiononclick但我不想使用option value. 如果我给我的按钮一个，我的代码就可以工作，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'));
    });
});

网址：

<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

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

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>