HTML JavaScript下拉onChange未觸發

Question

我從以下小提琴開始：

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

當您直接從下拉列表中選擇一個品牌時，將觸發該函數，但是當您使用“ 下一個”和“ 上一個”按鈕時，該函數不會觸發“ showModel（this.value）”。 您如何使其認識到變化？

Answer 1

我看不出創建函數showModel()有太多用處，因為您已經使用了jQuery，我認為讓它處理select元素的更改會容易得多。

我已將jQuery的on change事件處理程序添加到select中以警告該值，但我還在每個next和prev函數中添加了一個觸發器，以在mycars更改時執行該函數。

JS小提琴演示

片段演示

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

如果您對上面的源代碼有任何疑問，請在下面發表評論，我們將盡快與您聯系。

我希望這有幫助。 編碼愉快！