为什么jquery函数只能在onchange中工作一次？答案

【问题标题】：Why jquery function only works once in onchange?为什么jquery函数只能在onchange中工作一次？
【发布时间】：2016-12-14 06:42:08
【问题描述】：

想法：每次我更改选择选项时，它都会检查我的 data-x 属性是否为 == "y"，如果是，则警报窗口会显示与此相关的数据信息。在我尝试将此数据信息打印到名为“结果”的 div 之前，此代码运行良好。在此之后，它只向我显示一次结果，直到我刷新浏览器，然后一切都恢复正常。我怎样才能做到这一点？我做错了什么？

$(window).on('load', function() {
  $('select').change(function() {
    if ($(this).children('option:selected').data('x') == 'y') {
      alert($(this).children('option:selected').data('info'));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select required name="client_id" id="client_id" class="form-control selectpicker show-tick form-control" data-live-search="true" data-show-subtext="true">
  <option value="">-- NONE --</option>
  <option data-info="jUST tESTING" data-x="y" value="2" data-subtext="Santa Maria #1234">Antonio Perez</option>
  <option value="5" data-subtext="AV. Los Cerrillos 602, Chile - Santiago">Tatiana Gutierrez</option>
  <option data-info="aNOTHER tEST" data-x="y" value="6" data-subtext="xxxxxxxxxxxxxxxx">Ventas</option>
</select>

谢谢！

【问题讨论】：

Ermmm...我认为它对我有用。
是的，它工作正常......
除非你Prevent this page from creating additional dialogs

标签： javascript jquery select live dropdown

【解决方案1】：

需要将selected option的data-info属性的值赋值给div

<div id="result"></div>
<select required name="client_id" id="client_id" class="form-control selectpicker show-tick form-control" data-live-search="true" data-show-subtext="true"  >
    <option value="">-- NONE --</option>
    <option  data-info="jUST tESTING" data-x="y"  value="2" data-subtext="Santa Maria #1234">Antonio Perez </option>
    <option  value="5" data-subtext="AV. Los Cerrillos 602, Chile - Santiago">Tatiana Gutierrez </option>
    <option  data-info="aNOTHER tEST" data-x="y"  value="6" data-subtext="xxxxxxxxxxxxxxxx">Ventas </option>
</select>


<script>
 $(function () {
   $('select').change(function () {
     if ($(this).children('option:selected').data('x') == 'y') {
         $("#result").html($(this).children('option:selected').attr('data-info'));
     }
     else
         $("#result").html("");
    });
});
    </script>

Here 是 jsfiddle

【讨论】：

你的答案是正确的。我只是有一个相关的问题要问你。我正在使用带有关闭选项的引导警报，如下所示
×

。如果我关闭警报，选择下拉菜单将停止显示结果。知道为什么吗？
@fecapeluda 请接受此为正确答案，您可以发布新问题并将该问题的链接发送给我，因为 cmets 中的代码不清楚。
请检查这个同时我开始一个新问题codepen.io/lowpez/pen/Woagev
@fecapeluda 在此检查什么？
点击“x”或关闭图标。并尝试代码，您会看到该功能停止工作。似乎与 data-dismiss="alert" 标记有关。

【解决方案2】：

您需要将负载更改为就绪：

$('select').change(function(){
   if ($(this).children('option:selected').data('x') == 'y') { 
    alert($(this).children('option:selected').data('info'));
  }
 });

});

$(document).ready(function() {
  $('select').change(function() {
    if ($(this).children('option:selected').data('x') == 'y') {
      alert($(this).children('option:selected').data('info'));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select required name="client_id" id="client_id" class="form-control selectpicker show-tick form-control" data-live-search="true" data-show-subtext="true">
  <option value="">-- NONE --</option>
  <option data-info="jUST tESTING" data-x="y" value="2" data-subtext="Santa Maria #1234">Antonio Perez</option>
  <option value="5" data-subtext="AV. Los Cerrillos 602, Chile - Santiago">Tatiana Gutierrez</option>
  <option data-info="aNOTHER tEST" data-x="y" value="6" data-subtext="xxxxxxxxxxxxxxxx">Ventas</option>
</select>

【讨论】：