指定jQuery插件下拉不工作

Question

我正在創建一個有4個下拉列表的音頻播放器，每個都依賴於彼此以獲得正確的mp3文件，jquery代碼工作正常，直到我分配插件到名爲（fancyspinbox）的下拉列表中，看起來更好。 問題是下拉菜單沒有通過成功觸發來更新它的值。

請在下面找到

<script> 
$(document).ready(function() { 
    $('#ddbibletype').fancyspinbox(); 
    $('#ddtestament').fancyspinbox(); 
    $("#booksdd").fancyspinbox(); 
    $("#chapterdd").fancyspinbox(); 
}); 
$("#ddtestament").change(function() { 
    var options = {}; 
    options.url = '@Url.Action("GetBooks", "Home")'; 
    options.type = "POST"; 
    if ($("#ddtestament option:selected").index() == 0) 
     options.data = JSON.stringify({ testament: 'OT' }); 
    else 
     options.data = JSON.stringify({ testament: 'NT' }); 
    options.dataType = "json"; 
    options.contentType = "application/json; charset=utf-8"; 
    options.success = function (jsonResult) { 
     $("#booksdd").empty(); 
     $("#chapterdd").empty(); 
     var jb = $(jsonResult.jbooks); 
     var jc = $(jsonResult.jchapters); 
     for (var i = 0; i < jb.length; i++) { 
      $("#booksdd").append("<option>" + jb[i] + "</option>"); 
     } 
     for (var i = 0; i < jc.length; i++) { 
      $("#chapterdd").append("<option>" + jc[i] + "</option>"); 
     } 
     $("#booksdd").change(); 
    }; 
    options.error = function() { alert("Error retrieving Books!"); }; 
    $.ajax(options); 
}); 

$("#booksdd").change(function() { 

     var options = {}; 
     options.url = '@Url.Action("GetChapters", "Home")'; 
     options.type = "POST"; 
     if ($("#ddtestament option:selected").index() == 0) 
      options.data = JSON.stringify({ bookID: $("#booksdd option:selected").index() }); 
     else 
      options.data = JSON.stringify({ bookID: ($("#booksdd option:selected").index() + 39) }); 
     options.dataType = "json"; 
     options.contentType = "application/json; charset=utf-8"; 
     options.success = function (chapters) { 
      $("#chapterdd").empty(); 
      for (var i = 0; i < chapters.length ; i++) { 
       $("#chapterdd").append("<option>" + chapters[i] + "</option>"); 
      } 
      $("#chapterdd").prop("disabled", false); 
      $("#chapterdd").change(); 
     }; 
     options.error = function() { alert("Error retrieving chapters!"); }; 
     $.ajax(options); 

}); 

$("#chapterdd").change(function() { 

     var options = {}; 
     options.url = '@Url.Action("GetTrackPath", "Home")'; 
     options.type = "POST"; 
     if ($("#ddtestament option:selected").index() == 0) 
      options.data = JSON.stringify({ bibleType: $("#ddbibletype option:selected").index(), bookID: $("#booksdd option:selected").index() + 1, chapterNum: $("#chapterdd option:selected").index() + 1 }); 
     else 
      options.data = JSON.stringify({ bibleType: $("#ddbibletype option:selected").index(), bookID: ($("#booksdd option:selected").index() + 40), chapterNum: $("#chapterdd option:selected").index() + 1 }); 
     options.dataType = "json"; 
     options.contentType = "application/json; charset=utf-8"; 
     options.success = function (trackpath) { 
      var audio = $('#bibleplayer'); 
      $('#mpsource').attr('src', trackpath); 
      audio[0].pause(); 
      audio[0].load();//suspends and restores all audio element 
      audio[0].oncanplaythrough = audio[0].play(); 
     }; 
     options.error = function() { 
      alert("Error retrieving Books!"); 
     }; 
     $.ajax(options); 



}); 

Answer 1

我的代碼，我假設你正在使用此fancyspingbox？ https://github.com/mayakokits/jquery.fancyspinbox

沒有提到需要添加不同的事件偵聽器，但他們確實提到「如果您需要訪問spinbox元素，請使用元素對象。」。可能是該溶液

即該行

$("#ddtestament").change(function() { 

變得

$("#ddtestament").element.change(function() { 

或

$($("#ddtestament").element).change(function() { 

作爲執行其它類似的線。