jQuery的空（）阻止选择

Question

前段时间我张贴了这个问题，询问如何获取JSON数据到jQuery的下拉菜单 jquery dropdown from mysql based on previous selection

那么这里的人是真棒，我得到了一个解决方案。我现在面临的问题是，建议的解决方案在我的生产环境中不起作用，但它在我的测试中有效。

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

这是从JSON

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'])); 
      }); 

生成optiosn的功能是一种替代空的（），将不能防止选择？

编辑这似乎仅是一个问题，如果有少于两个项目是动态输入
EDIT 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数据，但如果您尝试点击列表中的第一项，仍然可以看到问题。看来，仿佛均匀去除它不是一个问题 http://jsfiddle.net/BandonRandon/xXUfp/1/

Answer 1

不要使用empty()明确的下拉列表中的选项它与uniformjs问题。这是错误的，因为它应该被用来删除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。

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

Answer 2

那么尝试这样的事情，但不保证一定

$('<option></option>').val(100).html('No Manager').appendTo($(select)); 

$.each(data, function(index, array) { 
    $('<option></option>').val(array['id']).html(ucfirst(array['first_name'])+ " "+ucfirst(array['last_name']).appendTo($(select)); 
});