使用 Jquery 更改选择值

我正在尝试使用 Jquery 更改表单中“选择”输入的值，但是当它更改时，该更改的函数不起作用。

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;
}

Demo: https://jsfiddle.net/fdko9nna/ https://jsfiddle.net/fdko9nna/

当我点击#buttondiv，它改变了选择字段，但是改变了#text它没有被执行。
Thanks.

您需要使用以下任一方式触发更改事件.change() or trigger('change')在你的按钮代码中：

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

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

jsFiddle 示例 https://jsfiddle.net/j08691/jvps8ckq/