jquery empty()阻止选择

Question

前段时间我发布了这个问题,询问如何根据以前的选择将JSON数据转换为jQuery下拉 jquery下拉列表

那么这里的人很棒,我得到了解决方案.我现在遇到的问题是建议的解决方案在我的生产环境中不起作用,但它在我的测试中确实存在.

为了防止重复主题我使用jQuery empty()问题是使用empty()似乎也阻止我选择第一个选项.

这是从JSON生成optiosn的函数

function(data){

            var select = $('[name="employee_manager"]');
            select.empty();
            select.append(new Option(ucfirst('No Manager'),'100'));

            $.each(data, function(index, array) {

                    select.append(new Option(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']),array['id']));
            });

这是否可以替代empty()而不会阻止选择？

编辑这似乎只是一个问题,如果动态输入少于两个项目
编辑2这是HTML.如果empty()存在,我似乎无法选择第一个选项

     <label for="manager">Reports To</label>
     <select name="employee_manager">
          <option value="1">Please Select Employee Role</option>
          <option value="2">John Doe</option>
          <option value="3">James Smith</option>
    </select>

编辑3

看起来空类正在为我的选择添加跨度

<div class="selector">
<span style="-moz-user-select: none;">Jane  Smith</span>
    <select name="employee_manager" style="opacity: 0;">
         <option value="100">No Manager</option>
</select>
</div>

编辑4
好的所以这是一个显示问题的jsfiddle.我无法正确加载JSON数据,但如果您尝试单击列表中的第一项,仍然可以看到问题.看起来这是uniformjs的一个问题,好像去掉了制服这不是问题 http://jsfiddle.net/BandonRandon/xXUfp/1/

Answer 1

不要empty()用于清除下拉列表的选项.这是错误的,因为它应该用于删除DOM子项.

而是使用这样的代码:

$("select[name='employee_manager'] > option").remove();

编辑:当使用jQuery uniform插件时,动态添加选项会让事情变得混乱...一种方法不需要去尝试修复插件就是总是有足够的"虚拟"选项到位(例如,如果这是最大的20)选项数量)然后根据您的数据更改这些选项的文本/值并隐藏所有其他选项.
正确的JS代码现在看起来像这样:

var myData = [];
myData.push( { text: "Please Select A Manager (JS)", value: "null" } );
myData.push( { text: "No Manager", value: "100" } );
myData.push( { text: ucfirst("a third choice"), value: "42" } );
$.each(data, function(index, array) {
   myData.push( { text: ucfirst(array['first_name'])+ " " + ucfirst(array['last_name']), value: array['id'] } );
});

$("select[name='employee_manager'] > option").each(function(index) {
   if (index < myData.length) {
      $(this).text(myData[index]["text"]);
      $(this).val(myData[index]["value"]);                          
      $(this).show();
   }
   else {
        $(this).hide();
   }
});

更新了jsFiddle.

原油,但工作...... :)