jquery的隐藏选择选项更改检测答案

【问题标题】：hidden select-option change detection by jqueryjquery的隐藏选择选项更改检测
【发布时间】：2017-06-09 06:12:38
【问题描述】：

如果选择列表被隐藏并由 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');
});

我需要一个解决方案，通过单击按钮来调用更改功能。

【问题讨论】：

标签： jquery html select onchange

【解决方案1】：

将您的代码更改为：

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

【讨论】：

【解决方案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();
});

【讨论】：

【解决方案3】：

使用.trigger 函数引发change 事件。

【讨论】：

【解决方案4】：

当您以编程方式设置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>

【讨论】：