如何使用Ajax和php填充可靠的下拉列表

您好我想使用Ajax管理下拉菜单中的数据。

数据库字段：

1.id

2.name

教研室

myDesgin.php

1.如果我选择了一个下拉菜单，想要使用Ajax更改另一个下拉菜单取决于所选值。

2.有任何代码可用，如果我选择一个下拉列表，它会转到另一个子窗口并使用Ajax以表格格式（如报表）显示数据。

提前致谢。

请给我示例代码，因为我是ajax的初学者，如果有人提供代码解释（对于ajax），最欢迎。

Answer 1

是的，检查以下jquery ajax代码。 在此示例中，如果您更改“部门”，则它将填充“名称”下拉列表。

 $(document).on("change", '#department', function(e) { var department = $(this).val(); $.ajax({ type: "POST", data: {department: department}, url: 'admin/users/get_name_list.php', dataType: 'json', success: function(json) { var $el = $("#name"); $el.empty(); // remove old options $el.append($("") .attr("value", '').text('Please Select')); $.each(json, function(value, key) { $el.append($("") .attr("value", value).text(key)); }); } }); }); 

Answer 2

我想你可以这样做：

创建一个接受两个args的全局函数， currElem, nextElem和dataObj ：

 function dynoDropdowns(currElem, nxtElem, dataObj){ $.ajax({ url:"path/to/file", type:"post", data:dataObj, dataType:"json", // <-------------expecting json from php success:function(data){ $(nxtElem).empty(); // empty the field first here. $.each(data, function(i, obj){ $('', { value:obj.value, text:obj.text } ).appendTo(nxtElem); }); }, error:function(err){ console.log(err); } }); } 

现在你的改变事件是：

 $(function(){ $('select').on('change', function(e){ if(this.id === "id"){ var dataObj = {id:this.value}; dynoDropdowns(this, '#name', dataObj); }else if(this.id === "name"){ var dataObj = {name:this.value}; dynoDropdowns(this, '#department', dataObj); } }); }); 

Answer 3

给定select1和select2像这样：

  X Y   1 2  

然后你可以用jQuery做这样的事情：

 $('#select1').on('change', function() { $.ajax({ url: "test.html", }).done(function(response) { $('#select2').html(response); }); 

假设你的ajax调用返回一个字符串

 34 

从您的服务器端文件。 如果你返回一个json，你必须先解码它，但这是它的一般要点。 看一下jQuery ajax（）函数

Answer 4

虽然有很多代码可供选择。 我正在为您编写最简单和最基本的代码。

HTML

AJAX代码

 function update_name(id) { var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txt").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","update_data.php?q="+id,true); xmlhttp.send(); } 

update_data.php（PHP代码）