Question

前段时间我发布了这个问题，询问如何将JSON数据导入jQuery下拉列表 jquery dropdown from mysql based on previous selection

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

为了防止重复主题，我使用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。

原油，但工作......：）

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

jquery empty（）阻止选择

2 个答案: