Question

我从以下小提琴开始：

这是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)">

当您直接从下拉列表中选择一个品牌时会触发此功能，但是当您使用下一个和上一个按钮时，它不会触发“showModel（ THIS.VALUE）”。你如何让它认识到这种变化？

Answer 1

我无法看到创建函数showModel()的大量用法，因为您已经使用了jQuery我认为处理select元素的更改会更容易。

我已将change事件处理程序中的jQuery添加到select以提醒值，但我还在每个next和prev函数中添加了一个触发器来执行更改mycars。

的功能

JS Fiddle Demo

代码段演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您对上述源代码有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

HTML JavaScript下拉列表未触发更改

1 个答案: