Question

我有1个按钮和2个选择元素。在我的jquery代码中有两个事件处理程序：

如果我点击按钮，则第一个选择框会改变。
如果更改了第一个选择框，则第二个框也会更改。

因此，如果单击该按钮，则第一个选择框将会更改，并且第一个选择框已更改，因此第二个选择框也应更改。但第二个盒子并没有改变。这是我的代码。还有live link我的代码。

<button id="b_a_1">
    click to select 2nd element from A
</button>
<br><br><br>
A : <select id='s_a'>
        <option value=1>1st element</option>
        <option value=2>2nd element</option>
        <option value=3>3rd element</option>
        <option value=4>4th element</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
B : <select id='s_b'>
        <option value=1>First element is selected</option>
        <option value=2>Second element is selected</option>
        <option value=3>Third element is selected</option>
        <option value=4>Fourth element is selected</option>
    </select>  
<script type="text/javascript">
    $("#b_a_1").click(function(){
        $("#s_a").val(2);
    });

    $("#s_a").change(function(){
        $("#s_b").val($("#s_a").val());
    });
</script>

我也试过这个：

$(document.body).on('change', '#s_a', function(){
    $("#s_b").val($("#s_a").val());
});

但没有好处。我该怎么做？

Answer 1

您必须手动触发change

$("#b_a_1").click(function(){
    $("#s_a").val(2).trigger("change");
});

更新示例：https://jsfiddle.net/v9gy4gLv/12/

Answer 2

＆＃13;

$("#b_a_1").click(function() {
  $("#s_a").val(2).change();//run the change event manually
});

$("#s_a").change(function() {
  $("#s_b").val($("#s_a").val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b_a_1">
  click to select 2nd element from A
</button>
<br>
<br>
<br>A :
<select id='s_a'>
  <option value=1>1st element</option>
  <option value=2>2nd element</option>
  <option value=3>3rd element</option>
  <option value=4>4th element</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; B :
<select id='s_b'>
  <option value=1>First element is selected</option>
  <option value=2>Second element is selected</option>
  <option value=3>Third element is selected</option>
  <option value=4>Fourth element is selected</option>
</select>

＆＃13;

使用.change()手动调用更改事件

jquery .change（）函数无法处理动态更改的元素

2 个答案: