使用Jquery更改选择值

Question

我尝试使用Jquery来更改表单中"select“输入的值，但当它更改时，该更改的函数就不起作用了。

HTML：

<select id='select'>
  <option checked value='1' >Option 1</option>
  <option value='2' >Option 2</option>
</select>
<div id='text'>Option 1 selected</div>
<div id='button'>Click to select Option 2</div>

JQuery：

$('#select').change(function(){
    if($(this).val() == '1'){
    $('#text').text('Option 1 selected');
  } else if($(this).val() == '2'){
    $('#text').text('Option 2 selected');
  }
});

$('#button').click(function(){
    $('#select').val('2');
})

CSS：

#button {
  cursor: pointer;
  color: white;
  background: red;
  padding: 5px;
  display: inline-block;
}

演示：https://jsfiddle.net/fdko9nna/

当我单击#buttondiv时，它会更改选择字段，但不会执行更改#text的函数。

谢谢。

Answer 1

您需要在按钮的代码中使用.change()或trigger('change')触发更改事件：

$('#button').click(function(){
    $('#select').val('2').change();
})

绑定到select的更改事件不会仅通过jQuery更改值来触发，因此需要调用jQuery的更改事件。

Answer 2

基于https://api.jquery.com/change/

描述:将事件处理程序绑定到change JavaScript事件，或在元素上触发该事件。

此方法是前两个变体中的.on( "change"，handler )和第三个变体中的.trigger( "change“)的快捷方式。

当元素的值发生更改时，将向该元素发送change事件。此事件仅限于元素、框和元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，事件会立即触发，但对于其他元素类型，事件会延迟到元素失去焦点。

您在JQuery中更改的值未触发更改事件，您需要为更改事件添加触发器。

Answer 3

试试这个：

 $('#button').click(function(){
        $('#select option[value="2"]').prop('selected', true);
    })