Question

编辑2 似乎这是一个CSS类的问题。

编辑奇怪的是，它不适用于网站的公共方面。它必须是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>

理念是，当选择员工角色或类型时，下面的字段会填充所有在食物链上方的经理。

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

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

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

这是棘手的部分，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/

来自mysql的jquery下拉列表基于之前的选择

1 个答案: