更改使用JQuery的選擇值

Question

我想使用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; 
} 

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

當我點擊#button DIV，它改變日e選擇字段，但更改#text它沒有執行的功能。
謝謝。

Answer 1

您需要在您的按鈕的代碼，通過.change()或trigger('change')觸發更改事件：

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

你必然要選擇更改事件沒有得到單獨改變通過jQuery值觸發，所以你需要調用jQuery的更改事件。

jsFiddle example

Answer 2

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

描述：綁定事件處理程序「變更」 JavaScript事件，或者觸發元素上的事件。

此方法是前兩個變體中的.on（「change」，handler）和第三個變體中的.trigger（「change」）的快捷方式。

更改事件發送到一個元素，當其值發生變化時。此事件僅限於元素，框和元素。對於選擇框，複選框和單選按鈕，當用戶使用鼠標進行選擇時，立即觸發該事件，但對於其他元素類型，事件被推遲直到元素失去焦點。

您在JQuery中更改的值沒有觸發更改事件，您需要爲更改事件添加觸發器。