javascript - 捕获自动更改元素的属性更改

Question

我想在我的网页上创建两个选择，这两个选择将相互连接，以便两个选择始终相同。让我用一个模拟示例来解释一下:

我有一个包含两个选择的网页:

<select class="myselector">
    <option value='1'>1
        <br>
    </option>
    <option value='2'>2
        <br>
    </option>
</select>
<select class="myselector">
    <option value='1'>1
        <br>
    </option>
    <option value='2'>2
        <br>
    </option>
</select>

注意:实际上，我不仅仅有两个选择，而且我希望将它们全部连接起来。

现在，我希望网页在第一个选择器发生更改时自动将第二个选择器设置为第一个选择器的值。我还想对已更改的选择执行一些其他操作，因此我也希望更改事件在其他选择器上触发。我的第一个想法就是这样做:

function valChange() {
    myfun();
    $('.myselector').val($(this).val());
}
$('.myselector').on('change', valChange);

• 这满足了我的需要，它更改了选定的值，使它们匹配
• 这不会触发其他选择中的更改事件，因此 myfun 仅运行一次

我的下一个想法是将 $('.myselector').change(); 添加到 valChange 函数的末尾，但这(自然)会导致变化事件的无限循环。

因此，我的问题是:

How can I trigger the change event in only the elements that have been changed automatically (not by a user)?

我认为可以通过同时进行更改和点击事件来完成，但这对我来说似乎是错误且丑陋的。

<小时/>

编辑:我找到了一种通过使用 jquery 选择器来解决我的问题的方法。如果存在更优雅的方法来解决问题，我仍然会很高兴看到它。

function valChange() {
    myfun()
    var others = $('.myselector[value!=' + $(this).val() + ']');
    others.val($(this).val());
    others.change();
}

$('.myselector').on('change', valChange);

JSfiddle 我的解决方案:

http://jsfiddle.net/5xum/svjbdxgs/

Answer 1

你可以使用jquery的每个方法

function valChange() {
     var _this = $(this)
     $('.myselector').each(function(){
          myFun();
          $(this).val(_this.val());
     });
}
$('.myselector').on('change', valChange);

这里是同样的 fiddle fiddle link