jQuery 2可编辑选择框 - 只有一个正在运行

Question

我有一张正在使用this jQuery Editable-Select Plugin的表单。我有2个选择框（如下图所示）。他们都使用类名editable-select，当我执行JS时 - 其中只有一个似乎受到调用的影响。当我显示editableSelect(...)的结果时，返回两个选择项，但插件明显不受影响。此选择不会被ajax填充，并且可以立即用于DOM。

我已经把基本代码拉出来并把它放到JSFiddle中，它运行得很好，所以我不会觉得插件有什么问题或任何东西......我确定我是忽略了什么。

如果我从工作选择框中删除该类，第一个仍然不起作用，所以它必须是选择框的东西 - 但我真的不能弄清楚是什么.. field1的代码从页面复制并粘贴选择。看起来对我好。

我应该在哪里寻找错误 - 我一直在尝试调试这几个小时，而且一切看起来都是合法的。控制台/ firebug中没有错误。请帮助：）

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);
  //}