隐藏 select-选项更改检测 jquery

Question

如果 select 列表被隐藏并由 js 设置，我正在尝试检测 select 列表更改。

我的代码在这里：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

当您以编程方式设置 select 元素的值时，不会引发 change 事件。要解决此问题，您可以手动 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();;
});

隐藏 select-选项更改检测 jquery

hidden select-option change detection by jquery

html

jquery

select

onchange