Question

如何编辑以下代码以使其使用数据属性？原因是因为在我的示例中，两个下拉列表的值不一样，所以我想将它们与其他内容链接起来，比如data-attribute。

<select name="" id="" class="select">
    <option value="">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>
<select name="" id="" class="select">
    <option value="">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>


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

Answer 1

这应该有效（按数据属性同步列表）：

<select name="" id="" class="select">
    <option data-id='1' value="">Select</option>
    <option data-id='2' value="1">Value 1</option>
    <option data-id='3' value="2">Value 2</option>
</select>
<select name="" id="" class="select">
    <option data-id='1' value="5">Select</option>
    <option data-id='2' value="3">Value 1</option>
    <option data-id='3' value="4">Value 2</option>
</select>


(function () {
    var select = $('select.select'), opt, dataAttr;
    select.change(function () {
        dataAttr = $(this).find(':selected').data('id');
        select.not($(this)).each(function(){
           if (opt = $(this).find('[data-id='+ dataAttr +']')){
               $(opt).prop('selected', true);
           }
        });
    });
})();

如何使用data-attribute而不是其值链接两个下拉列表？

1 个答案: