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

How to link two dropdown lists using data-attribute instead of their values?

本文关键字：链接 下拉列表 两个 数据属性 何使用      更新时间：2023-09-26

如何编辑以下代码，使其使用数据属性工作？这样做的原因是，在我的示例中，两个下拉列表的值将不相同，所以我想将它们与其他东西链接起来，比如数据属性。

<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);
           }
        });
    });
})();
相关文章：