jqueryで非表示の選択オプションの変更検出

Question

jsによって選択リストが非表示に設定されている場合、選択リストの変更を検出しようとしています。

私のコードはここにある：JsFiddle

​​

$('select').change(function() { 
    alert("ok"); 
}); 
$('.z').click(function() { 
    $("select").val('0'); 
}); 
$('.o').click(function() { 
    $("select").val('1'); 
}); 
$('.t').click(function() { 
    $("select").val('2'); 
}); 

私はボタンのクリックによって変更機能を呼び出すためのソリューションを必要としています。

Answer 1

select要素の値をプログラムで設定するときに発生するイベントはありません（change）。この問題を回避するには、手動trigger() 1することができます

$('select').change(function() { 
 
    console.log('changed', this.value) 
 
}); 
 
$('.z').click(function() { 
 
    $("select").val('0').trigger('change'); 
 
}); 
 
$('.o').click(function() { 
 
    $("select").val('1').trigger('change'); 
 
}); 
 
$('.t').click(function() { 
 
    $("select").val('2').trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select style="display: none"> 
 
    <option value="0">zero</option> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
</select> 
 
<button class="z">zero</button> 
 
<button class="o">one</button> 
 
<button class="t">two</button>

Answer 2

<select style="display:none"> 
    <option value="0">zero</option> 
    <option value="1">one</option> 
    <option value="2">two</option> 
</select> 
<button class=btn data-select-val="0">zero</button> 
<button class=btn data-select-val="1">one</button> 
<button class=btn data-select-val="2">two</button> 

$('select').change(function() { 
    alert($(this).val()); 
}); 
$('.btn').click(function(){ 
    $("select").val($(this).data("select-val")).change(); 
}); 

Answer 3

使用.trigger機能はchangeイベントを発生させます。

Answer 4

はこれにあなたのコードを変更

：

$('select').change(function(){ 
    alert("ok"); 
}); 

$('.z').click(function(){ 
    $("select").val('0').change(); 
}); 
$('.o').click(function(){ 
    $("select").val('1').change();; 
}); 
$('.t').click(function(){ 
    $("select").val('2').change();; 
});