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>

注意：实际上，我不仅仅有两个选择，我希望它们全部连接。

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

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

这样做我需要的是它改变了所选的值，使它们匹配
这不会触发其他选择中的更改事件，因此myfun仅运行一次

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

我的问题是：

如何仅在已经存在的元素中触发更改事件自动更改（不是由用户更改）？

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

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

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

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

JSfiddle for my solution：

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 link

的小提琴

自动更改元素的Catch属性更改

1 个答案: