HTML JavaScript下拉菜单onChange未触发

HTML JavaScript dropdown onChange not triggered

本文关键字：onChange JavaScript 下拉菜单 HTML      更新时间：2023-09-26

我从下面的小提琴开始:

http://jsfiddle.net/U4vaP/4/

这是HTML

<button type="button" id="prev">Previous</button>
<select id="mycars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
<button type="button" id="next">Next</button>

这是Javascript

$("#next").click(function() {
  var nextElement = $('#mycars > option:selected').next('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  }
});
$("#prev").click(function() {
  var nextElement = $('#mycars > option:selected').prev('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  }
});

然后我添加了这个onChange事件监听器来触发javascript中的函数

<select id="mycars" onChange="showModel(this.value)">

当你直接从下拉列表中选择一个make时，该函数会被触发，但是当你使用Next和Previous按钮时，它不会触发"showModel(this.value)"。如何让它识别变化?

我看不出创建一个函数showModel()有多大的用处，因为你已经使用了jQuery，我认为它会更容易处理你的选择元素的变化。

我已经添加了jQuery的on change事件处理程序的选择，以提醒值，但我也添加了一个触发器在每个next和prev函数执行函数的变化的mycars。

JS Fiddle Demo

<

代码片段演示/strong> 

$("#next").click(function() {
  var nextElement = $('#mycars > option:selected').next('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  }
  //Trigger onchange event
  $("#mycars").trigger("change");
});
$("#prev").click(function() {
  var nextElement = $('#mycars > option:selected').prev('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  }
  //Trigger onchange event
  $("#mycars").trigger("change");
});
// On change event for the select. 
$("#mycars").on('change', function() {
  $('#selection').html(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="selection">Please make a selection...</div>
<button type="button" id="prev">Previous</button>
<select id="mycars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="button" id="next">Next</button>

如果你对上面的源代码有任何疑问，请在下面留下评论，我会尽快回复你。

我希望这对你有帮助。编码快乐!

相关文章：