jQuery 2可編輯選擇框 - 只有一個在工作

Question

我有一個窗體正在使用this jQuery Editable-Select Plugin。我有2個選擇框（如下圖所示）。他們都使用類名editable-select，當我執行JS時 - 他們中只有一個似乎受到通話的影響。當我顯示editableSelect(...)的結果時，兩個選擇項都會返回，但其中一個明顯不受插件的影響。這個選擇沒有被ajax填充，並且可以立即被DOM使用。

我已經拉出了基本代碼並將其放入JSFiddle中，並且它工作得很好，所以我不會覺得這個插件或任何東西存在問題......我確信，米俯視着東西。

如果我從工作選擇框中刪除類，第一個仍然不起作用，所以它必須與選擇框中的東西 - 但我真的不能找出什麼.. field1選擇代碼被複制並從頁面右側粘貼。對我來說看起來不錯。

我應該在哪裏尋找一個錯誤 - 我一直在嘗試調試幾個小時，現在一切看起來都合法。在控制檯/螢火蟲沒有錯誤。請幫助:)

JS

theSubjectBox = $('.editable-select').editableSelect({ 
    bg_iframe: true, 
    onSelect: function(list_item) { 
     alert('List item text: '+ list_item.text() + ' Input value: '+ this.text.val()); 
    }, 
    case_sensitive: false, 
    items_then_scroll: 10 
}); 
console.log(theSubjectBox); 

我也曾嘗試

theSubjectBox = $('#field1').editableSelect({...}); 

控制檯輸出

[select#field1.editable-select, select#insertQM_hidden_select.editable-select]  
0  select#field1.editable-select 
1  select#insertQM_hidden_select.editable-select 
//The first item is clearly not touched by the plugin. Why!? :) 

HTML

<!--Not Working--> 
<select style="width:200px;" name="field1" id="field1" class="editable-select"> 
    <option value=''></option> 
    <option value="Answer Needed">Answer Needed</option> 
    <option value="Appointment Needed">Appointment Needed</option> 
    <option value="BULLETIN">BULLETIN</option> 
    <option value="Catalog/Literature">Catalog/Literature</option> 
    <option value="Comment(s)">Comment(s)</option> 
    <option value="Company Policy">Company Policy</option> 
    <option value="F.Y.I.">F.Y.I.</option> 
    <option value="IMPORTANT">IMPORTANT</option> 
    <option value="Information Please">Information Please</option> 
    <option value="Meeting Information">Meeting Information</option> 
    <option value="Need Your Help">Need Your Help</option> 
    <option value="Needs Visit">Needs Visit</option> 
    <option value="Personal">Personal</option> 
    <option value="Personnel Change">Personnel Change</option> 
    <option value="Question(s)">Question(s)</option> 
    <option value="Quotation Needed">Quotation Needed</option> 
    <option value="Reminder">Reminder</option> 
    <option value="Thank You">Thank You</option> 
    <option value="Trade Show">Trade Show</option> 
</select> 

<!--Working Fine--> 
<select style="width:630px;" id="insertQM" name="insertQM" class="editable-select"> 
    <option value="">Insert Quick Message</option> 
    <option value="Can I see you in my office?">Can I see you in my office?</option> 
    <option value="I'll take care of it right away.">I'll take care of it right away.</option> 
    <option value="I'm going to lunch now!">I'm going to lunch now!</option> 
    <option value="MUST CALL IMMEDIATELY!">MUST CALL IMMEDIATELY!</option> 
    <option value="No problémo">No problémo</option> 
    <option value="Not yet">Not yet</option> 
    <option value="Remind me later about that.">Remind me later about that.</option> 
</select> 

Answer 1

我發現一個的解決方案，雖然我不知道爲什麼，這是擺在首位發生。我剛剛在提供的JS文件中評論了以下if語句。我不知道如何設置這個項目的.data('editable-selecter')對象，但評論這個出來的作品。

//if($(this).data('editable-selecter') !== null) { 
    instances[i] = new EditableSelect(this, settings); 
    $(this).data('editable-selecter', i); 
    //}