为什么 jquery 函数在 onchange 中只起作用一次？

Question

想法：每次我更改 select 选项时，它都会检查我的 data-x 属性是否 == "y"，如果是，则发出警报 Window 显示与此相关的数据信息。在我尝试将此数据信息打印到名为 "result" 的 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>

谢谢！

Answer 1

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

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

Answer 2

您需要将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

为什么 jquery 函数在 onchange 中只起作用一次？

Why jquery function only works once in onchange?

javascript

jquery

select

live

dropdown