阿贾克斯+ PHP实现级联选择 [英] Ajax+PHP to implement cascading select
本文介绍了阿贾克斯+ PHP实现级联选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个demo.html页面，其中包含两个选项，第一个是类型，而第二个是配置，当我选择一个特定类型的第一选择，我想使用Ajax更新该第二选择的值。 例如，类型可能有值：虚拟机，服务器，DCA 和VM只有配置燎节点，但DCA具有配置D0 - D48。所以，如果我在第一个选项中选择DCA，我应该有49个选项中的第二个。
我在网上搜索，并没有找到一些解决办法，然后我用我自己写了一些code。现在的问题是，无论我选择的第一选择，第二个将不被更新，它总是返回null。
不知道在哪里的概率是，在code看起来罚款:(感谢您的帮助。
演示页
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;元字符集=utf-8＆GT;
＆LT;冠军＆GT;订座系统和LT; /标题＆GT;
＆LT;链接HREF =的jquery / UI / CSS /晴天/ jQuery的-UI-1.8.16.custom.css相对=样式类型=文本/ CSS＆GT;
＆LT;链接HREF =jQuery的/数据表/ CSS / MRBS-page.css相对=样式类型=文本/ CSS＆GT;
＆LT;链接HREF =jQuery的/数据表/ CSS / MRBS-table.css相对=样式类型=文本/ CSS＆GT;
＆LT;链接HREF =jQuery的/数据表/ CSS / ColReorder.css相对=样式类型=文本/ CSS＆GT;
＆LT;链接HREF =jQuery的/数据表/ CSS / ColVis.css相对=样式类型=文本/ CSS＆GT;
＆LT;链接相对=样式表的href =CSS / mrbs.css.php类型=文本/ CSS＆GT;
＆LT;链接相对=样式媒体=打印的href =CSS / MRBS-print.css.php型=文本/ CSS＆GT;
＆LT; META NAME =机器人CONTENT =NOINDEX＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =的jQuery / jQuery的-1.7.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =的jquery / UI / jQuery的-UI-1.8.22.custom.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =的jquery / UI / jQuery的-UI-i18n.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =的jquery / UI / jQuery的-UI-日期选择器，en.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =的jquery / UI / jQuery的-UI-日期选择器烯US.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =jQuery的/数据表/ JS / jquery.dataTables.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =jQuery的/数据表/ JS / ColReorder.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR XMLHTTP;
VAR URL;
功能createXMLHtt prequest（）{
如果（window.XMLHtt prequest）
XMLHTTP =新XMLHtt prequest（）;
其他
XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
}
功能showConfig（STR）{
URL =？getOptions.php TYPE =+ STR;
createXMLHtt prequest（）;
xmlhttp.open（GET，URL，真正的）;
xmlhttp.send（空）;
xmlhttp.onreadystatechange =功能（）{handleStateChange（）};
}
功能handleStateChange（）{
如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）
{
VAR海峡= xmlhttp.responseText;
警报（URL）;
createConfig（STR）;
}
}
功能createConfig（STR）{
VAR的configs =海峡;
变种配置= configs.split（，）;
而（的document.getElementById（配置）options.lengt＆GT; 0）
。的document.getElementById（配置）options.remove（0）;
对于（VAR I = 0; I＆LT; config.length;我++）
{
VAR ooption = document.createElement方法（选项）;
ooption.value =配置[I]
ooption.text =配置[I]
。的document.getElementById（配置）增加（ooption）;
}
}
＆LT; / SCRIPT＆GT;
＆LT;形式ID =add_room级=form_admin行动=add.php方法=邮报＆GT;
＆LT;字段集＆GT;
＆LT;传奇＆gt;添加DCA＆LT; /传说＆GT;
＆LT;输入类型=隐藏名称=输入值=房间＆GT;
＆LT;输入类型=隐藏名称=区域值=2＆GT;
＆LT; DIV＆GT;
＆LT;标签=ROOM_NAME＆GT;名称：＆LT; /标签＆gt;
＆LT;输入类型=文本ID =ROOM_NAMENAME =名称最大长度=50＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;标签=room_description＆GT;简介：＆LT; /标签＆gt;
＆LT;输入类型=文本ID =room_descriptionNAME =说明最大长度=100＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;标签=room_type＆GT;型号：LT; /标签＆gt;
＆LT;选择类=room_area_selectID =type_selectNAME =区域的onchange =showConfig（THIS.VALUE）＆GT;＆LT;期权价值=VM＆GT; VM＆LT; /选项＆GT;＆LT;期权价值= 服务器＆GT;服务器16; /选项＆GT;＆LT;期权价值=DCA-V1＆GT; DCA-V1＆LT; /选项＆GT;＆LT;期权价值=DCA-V2＆GT; DCA-V2＆LT; /选项＆GT;＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;标签=配置＆GT;配置：其中; /标签＆gt;
＆LT;选择一个id =配置＆GT;＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; /字段集＆GT;
＆LT; /形式GT;
getOptions.php文件
＆LT; PHP
$型= $ _GET ['类型'];
回声$类型;
$结果=;
如果（$类型==DCA-V1）{
为（$ i = 0; $ I＆LT; 47，$ ++）
。$结果= $ I，;
$结果=48。
}
否则，如果（$类型==服务器）
。$结果=单点;
否则，如果（$类型==VM）{
。$结果=单一主机;
}
回声$结果;
？＆GT;
解决方案
因为你已经在你的页面使用jQuery，我建议jQuery的AJAX选项。
下面应该工作。相应地更新它。
getOptions.php
＆LT; PHP
$型= $ _GET ['类型'];
$结果=;
如果（$类型==DCA-V1）{
为（$ i = 0; $ I＆LT; 47; $ I ++）
。$结果= $ I，;
$结果=48。
}否则，如果（$类型==服务器）{
。$结果=单点;
}否则，如果（$类型==VM）{
。$结果=单一主机;
}
回声$结果;
？＆GT;
演示页
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =jQuery的-1.7.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃type_select'）。改变（函数（）{
//获取当前项目的值
VAR型= $（本）.VAL（）;
$阿贾克斯（{
网址：getOptions.php TYPE =+型，
成功：功能（数据）{
VAR的结果，选择采用=;
//我们得到逗号分隔数据
结果= data.split（，）;
// prepare选项
对于（VAR I = 0; I＆LT; result.length;我++）{
OPTS + =＆LT;期权价值='+结果[我] +＆gt;中+结果[我] +＆LT; /选项＆gt;中;
}
//填充第二选择
$（'＃配置）HTML（选）。
}，
错误：函数（）{
警报（错误）;
}
}）;
}）;
//默认情况下填充为当前所选项目的选项
$（'＃type_select）触发（'改变'）。
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;形式ID =add_room级=form_admin行动=add.php方法=邮报＆GT;
＆LT;字段集＆GT;
＆LT;传奇＆gt;添加DCA＆LT; /传说＆GT;
＆LT;输入类型=隐藏名称=输入值=房间＆GT;
＆LT;输入类型=隐藏名称=区域值=2＆GT;
＆LT; DIV＆GT;
＆LT;标签=ROOM_NAME＆GT;名称：＆LT; /标签＆gt;
＆LT;输入类型=文本ID =ROOM_NAMENAME =名称最大长度=50＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;标签=room_description＆GT;简介：＆LT; /标签＆gt;
＆LT;输入类型=文本ID =room_descriptionNAME =说明最大长度=100＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;标签=room_type＆GT;型号：LT; /标签＆gt;
＆LT;选择类=room_area_selectID =type_selectNAME =区域＆GT;
＆LT;期权价值=VM＆GT; VM＆LT; /选项＆GT;
＆LT;期权价值=服务器＆GT;服务器16; /选项＆GT;
＆LT;期权价值=DCA-V1＆GT; DCA-V1＆LT; /选项＆GT;
＆LT;期权价值=DCA-V2＆GT; DCA-V2＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT;标签=配置＆GT;配置：其中; /标签＆gt;
＆LT;选择一个id =配置＆GT;＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; /字段集＆GT;
＆LT; /形式GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
尝试提供一些意见。
让我们知道，如果你需要任何帮助。
I have a demo.html page, which contains two selections, the first one is "Type", and the second one is "Config", when I choose a certain type in the first selection, I want to use ajax to update the values in the second selection. For example, Type may have values: VM, Server, DCA and VM only has config "singe node", but DCA has Config "d0"-"d48". so if I select DCA in the first selection, I should have 49 options in the second one.
I searched online and did find some solutions, then I wrote some code by myself. The problem now is that whatever I select in the first selection, the second one will not be updated, it always return null.
Not sure where the prob is, the code looks fine :( Thanks for any help.
demo page
<html>
<head>
<meta charset="utf-8">
<title>Reservation System</title>
<link href="jquery/ui/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/mrbs-page.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/mrbs-table.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/ColReorder.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/ColVis.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/mrbs.css.php" type="text/css">
<link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">
<meta name="robots" content="noindex">
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-i18n.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en-US.js"></script>
<script type="text/javascript" src="jquery/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery/datatables/js/ColReorder.min.js"></script>
<script type="text/javascript">
var xmlhttp;
var url;
function createXMLHttpRequest() {
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function showConfig(str) {
url = "getOptions.php?type="+str;
createXMLHttpRequest();
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {handleStateChange()};
}
function handleStateChange() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var str = xmlhttp.responseText;
alert (url);
createConfig(str);
}
}
function createConfig(str) {
var configs = str;
var config = configs.split(",");
while (document.getElementById("config").options.lengt>0)
document.getElementById("config").options.remove(0);
for (var i=0; i<config.length; i++)
{
var ooption = document.createElement("option");
ooption.value = config[i];
ooption.text = config[i];
document.getElementById("config").add(ooption);
}
}
</script>
<form id="add_room" class="form_admin" action="add.php" method="post">
<fieldset>
<legend>Add DCA</legend>
<input type="hidden" name="type" value="room">
<input type="hidden" name="area" value="2">
<div>
<label for="room_name">Name:</label>
<input type="text" id="room_name" name="name" maxlength="50">
</div>
<div>
<label for="room_description">Description:</label>
<input type="text" id="room_description" name="description" maxlength="100">
</div>
<div>
<label for="room_type">Type:</label>
<select class="room_area_select" id="type_select" name="area" onchange="showConfig(this.value)"><option value="VM">VM</option><option value="Server">Server</option><option value="DCA-V1">DCA-V1</option><option value="DCA-V2">DCA-V2</option></select>
</div>
<div>
<label for = "config">config:</label>
<select id="config" ></select>
</div>
</fieldset>
</form>
getOptions.php file
<?php
$type = $_GET['type'];
echo $type;
$result = "";
if ($type == "DCA-V1") {
for ($i=0;$i<47;$++)
$result .= $i.",";
$result .= "48";
}
else if ($type == "Server")
$result .= "single node";
else if ($type == "VM") {
$result .= "single host";
}
echo $result;
?>
解决方案
As you are already using jQuery in your page, I suggest jQuery's ajax option.
Following should work. Update it accordingly.
getOptions.php
<?php
$type = $_GET['type'];
$result = "";
if ($type == "DCA-V1") {
for ($i=0;$i<47;$i++)
$result .= $i.",";
$result .= "48";
} else if ($type == "Server") {
$result .= "single node";
} else if ($type == "VM") {
$result .= "single host";
}
echo $result;
?>
Demo Page
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#type_select').change(function() {
//Get current item's value
var type = $(this).val();
$.ajax({
url : "getOptions.php?type=" + type,
success : function(data) {
var result, opts = "";
//We get comma separated data
result = data.split(',');
//Prepare options
for(var i = 0; i < result.length; i++) {
opts += "<option value='" + result[i] + "'>" + result[i] + "</option>";
}
//Populate second select
$('#config').html(opts);
},
error : function() {
alert("Error");
}
});
});
//By default populate options for currently selected item
$('#type_select').trigger('change');
});
</script>
</head>
<body>
<form id="add_room" class="form_admin" action="add.php" method="post">
<fieldset>
<legend>Add DCA</legend>
<input type="hidden" name="type" value="room">
<input type="hidden" name="area" value="2">
<div>
<label for="room_name">Name:</label>
<input type="text" id="room_name" name="name" maxlength="50">
</div>
<div>
<label for="room_description">Description:</label>
<input type="text" id="room_description" name="description" maxlength="100">
</div>
<div>
<label for="room_type">Type:</label>
<select class="room_area_select" id="type_select" name="area">
<option value="VM">VM</option>
<option value="Server">Server</option>
<option value="DCA-V1">DCA-V1</option>
<option value="DCA-V2">DCA-V2</option>
</select>
</div>
<div>
<label for = "config">config:</label>
<select id="config" ></select>
</div>
</fieldset>
</form>
</body>
</html>
Tried providing some comments.
Let us know if you need any help.
这篇关于阿贾克斯+ PHP实现级联选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
