如何使用 Ajax 和 php 填充可靠的下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29204934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to populate dependable drop-down using Ajax and php
提问by Lydia
Hi i want to manage data on drop-down menu using Ajax.
嗨，我想使用 Ajax 管理下拉菜单上的数据。
Databse Fields:
数据库字段：
1.id
1.id
2.name
2.名称
3.department
3.部门
myDesgin.php
我的设计文件
<select id="id"></select>
<select id="name"></select>
<select id="department"></select>
1.If i selected one drop-down menu want to change another drop-downs depend on selected value using Ajax.
1.如果我选择了一个下拉菜单想要更改另一个下拉菜单取决于使用 Ajax 选择的值。
2.Is there any code available, if i select one drop-down it go to another child window and display data as in table format(like report) using Ajax.
2.是否有任何可用的代码，如果我选择一个下拉菜单，它会转到另一个子窗口并使用Ajax以表格格式（如报告）显示数据。
Thanks in Advance.
提前致谢。
Please give me example code, because i am beginner to ajax , most welcome if someone provide explanation with code(for ajax).
请给我示例代码，因为我是 ajax 的初学者，如果有人提供代码解释（对于 ajax），非常欢迎。
回答by Nilesh Dharmik
Yes, check following jquery ajax code. In this example, if you change "Department" then it will populate the listing of "Name" dropdown.
是的，检查以下 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($("<option></option>")
.attr("value", '').text('Please Select'));
$.each(json, function(value, key) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
}
});
});回答by Jai
I guess you can do this:
我想你可以这样做：
make a global function which accepts two args, currElem, nextElemand dataObj:
创建一个接受两个参数的全局函数，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){
$('<option />',
{
value:obj.value,
text:obj.text
}
).appendTo(nxtElem);
});
},
error:function(err){
console.log(err);
}
});
}
now your change events are:
现在您的更改事件是：
$(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);
}
});
});
回答by user3154108
given select1 and select2 like this:
给定 select1 和 select2，如下所示：
<select id="select1">
<option id="11" value="x">X</option>
<option id="12" value="y">Y</option>
</select>
<select id="select2">
<option id="21" value="1">1</option>
<option id="22" value="2">2</option>
</select>
then you can do something like this with jQuery:
然后你可以用 jQuery 做这样的事情：
$('#select1').on('change', function() {
$.ajax({
url: "test.html",
}).done(function(response) {
$('#select2').html(response);
});
This assumes your ajax call returns a string like
这假设您的 ajax 调用返回一个字符串
<option id="21" value="3">3</option><option id="22" value="4">4</option>
from your server sided file. If you return a json you have to decode it first, but this is the general gist of it. Take a look at the jQuery ajax()function
从您的服务器端文件。如果你返回一个 json 你必须先解码它，但这是它的一般要点。看看jQuery的ajax()函数
回答by Dalvik
Although there are many codes available out there. I am writing most easy and basic code for you.
虽然有很多可用的代码。我正在为您编写最简单和基本的代码。
HTML
HTML
<select id="id" onchange="update_name(this.id)"></select>
AJAX Code
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 code)
update_data.php（PHP 代码）
<?php
if(isset($_GET['q'])
{
$id= $_GET['q'];
//based on id run your query
}
