javascript - 如何使用数据属性而不是它们的值链接两个下拉列表？

如何编辑以下代码，以便使用数据属性来使其正常工作？这是因为在我的示例中，两个下拉列表的值将不同，所以我想将它们与其他内容（例如数据属性）链接起来。

<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);
    });
});

最佳答案

这应该可以工作（通过数据属性同步列表）：

<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);
           }
        });
    });
})();