javascript - 基于先前选择的 mysql 的 jquery 下拉列表

Question

EDIT 2 似乎是 CSS 类的问题。

编辑 奇怪的是，它在站点的公共(public)端运行，而不是在私有(private)端运行。它必须是 css 或与另一个插件冲突。

首先让我说我的 jQuery 经验很少，这是我第一次涉足 ajax。

我想做的是根据上一个下拉列表的选择动态填充下拉列表数据。

我有这样的 html

        <label for="employee_type">Employee Type</label>
        <select name="employee_type" id="employee_type">
                 <option value="1" selected="selected">Team Member</option>
                 <option value="2">Supervisor</option>
                 <option value="3">Manager</option>
           </select>        

        <label for="manager">Reports To</label>
        <select name="manager" id="manager_name">
                  <option value="0" selected="selected">Please Select Employee Role</option>
           </select>                 

想法是，当选择员工 Angular 色或类型时，下面的字段将填充食物链上更高层的所有经理。

我有一个用 php 编写的 MYSQL 选择字符串，它使用 json_encode 输出一些 json，其输出是

[{"id":"2","first_name":"John","last_name":"Doe"}]

这基本上只是一个数组，其中包含所有用户及其名称和要显示在数组中的 ID。

这里是棘手的部分，ajax。我找到了 this tutorial我已经修改了

    // attach a change handler to the form
  $("select#employee_type").change(function(){
   //get the mininimum employee level   
    var input = $("select#employee_type").val();
    //get the callback url
    var ajax_url = "/admin/employee/get_json/"+input;

   $.ajax({
      url:ajax_url,
      data:{ url:escape(ajax_url) },
      dataType:"json",
      success:function(data){ 
              var select = $('#manager_name');
        var options = select.attr('options');
              $('option', select).remove();

        $.each(data, function(index, array) {
                options[options.length] = new Option(array['first_name']+ " "+array['last_name'],array['id']);
        })
                },

            error:function(xhr,err,e){ alert( "Error: " + err ); }
    }); // $.ajax()
    return false;
  }); // .submit()*/

这工作了大约 78%。它添加了正确的选项和值。失败的地方是，如果我有 $('option', select).remove(); (这是确保每次字段更改时都不会添加 vaules 的必要条件)该字段当我尝试点击它时被删除。我还认为删除所选选项会很好(请选择...)。

在这方面的任何帮助都会很棒!

Answer 1

我建议使用 .empty() 而不是 .remove() ，因为这样您实际上只删除该元素的子元素而不是元素本身。

success:function(data){ 
    var select = $('#manager_name');
        select.empty();

        $.each(data, function(index, array) {
               select.append(new Option(array['first_name']+ " "+array['last_name'],array['id']));
        })
},

我个人没有使用过新的Option方法，所以无法验证它是否正确。

有效的解决方案应该是 http://jsfiddle.net/HffLg/10/