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

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

编辑奇怪的是，它不是在私人网站的公共方面工作。 它必须是css或与另一个插件冲突。

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

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

我有html看起来像这样

Employee Type  Team Member Supervisor Manager  Reports To  Please Select Employee Role  

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

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

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

这基本上只是所有用户的数组，它们的名称和ID将在数组中显示。

这是棘手的部分，ajax。 我找到了我修改过的这个教程

  // 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的nessarry）当我尝试单击它时，该字段将被删除。 我也认为删除所选选项（请选择…）会很不错。

对此的任何帮助都会很棒！

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方法，所以我无法validation它是否正确。

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