0

不久前，我发布了这个问题，询问如何 根据先前的选择从 mysql获取 JSON 数据到 jQuery 下拉列表

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

为了防止重复主菜，我正在使用 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']));
            });

这是不会阻止选择的 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的问题，好像uniform被移除了这不是问题 http://jsfiddle.net/BandonRandon/xXUfp/1/

4

2 回答 2

5

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

而是使用这样的代码：

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

编辑：当使用 jQueryuniform插件时，动态添加选项会搞砸事情......一种不需要去尝试修复插件的方法是始终有足够的“虚拟”选项（例如，如果这是最大值，则为 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。

粗鲁，但工作.... :)

于 2011-03-20T08:27:56.300 回答
0

好吧尝试这样的事情，但不能保证

$('<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));
});
于 2011-03-20T08:29:22.677 回答