скрытое обнаружение изменения опции с помощью jquery

Question

Я пытаюсь выявить изменение списка выбора, если список выбора скрыт и установлен js.

Мой код здесь: JsFiddle

<select onchange="myfunction()" 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> 

$('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

Нет события change, возникающего при программировании элемента select. Чтобы обойти эту проблему вы можете trigger() один вручную:

$('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();; 
});