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/

当我点击#button div时，它会更改选择字段，但更改#text的功能不会被执行。
感谢。

Answer 1

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

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

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

<强> jsFiddle example

Answer 2

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

描述：将事件处理程序绑定到＆＃34;更改＆＃34; JavaScript事件，或在元素上触发该事件。

此方法是前两个变体中.on（＆＃34;更改＆＃34;，处理程序）的快捷方式，而第三个变种中的.trigger（＆＃34;更改＆＃34;）。

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

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

Answer 3

尝试一下：

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

使用Jquery更改选择值

3 个答案: