jQuery 2个可编辑的选择框-只有一个在工作

我有一张正在使用的表格。我有两个选择框（如下图所示）。它们都在使用classname

editable select

，当我执行JS时，似乎只有一个会受到调用的影响。当我显示

editableSelect（…）

的结果时，两个选择项都会返回，但有一个插件显然未触及。这个select不是由ajax填充的，DOM可以立即使用它

我已经提取了基本代码并将其放入JSFIDLE中，它工作得很好，所以我不认为插件或任何东西有问题。。。我肯定我忽略了什么

如果我从工作选择框中删除该类，第一个仍然不工作，因此它必须与选择框有关-但我真的找不出是什么。。

字段1

选择的代码从页面右侧复制并粘贴。我觉得还可以

我应该在哪里寻找错误-我已经试着调试了几个小时，现在一切看起来都是合法的。控制台/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({...});

控制台输出

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>

需要的答案
需要预约
公告
目录/文献
评论
公司政策
F.Y.I。
重要的
请提供信息
会议信息
需要你的帮助吗
需要访问
个人的
人事变动
问题:
需要报价
提醒
非常感谢。
贸易展览会
插入快速消息
我能在办公室见你吗？
我会马上处理的。
我现在要去吃午饭了！
我必须马上打电话！
没问题
还没有
以后再提醒我。

---

我找到了一个解决方案，尽管我不知道为什么会发生这种情况。我刚刚在提供的JS文件中注释掉了下面的if语句。我不知道这个项目的

.data（'editable-selector'）

对象是如何设置的，但对它进行注释是可行的

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

---

@斯马马蒂：是的。事实上，另一个选择是不起作用的。对我有效。对它在JSFIDLE中也适用于我。但问题是相同的代码在我的网站上不起作用。：）那么问题就出在你网站的其他地方了……这就是我所担心的——问题是，人们如何追踪到这一点？我没有收到任何其他错误。这是错误的JS-无效的HTML。。。grr.：）

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