使用jQuery/PHP的级联下拉列表 [英] Cascade Dropdown List using jQuery/PHP
问题描述
问题:我有国家/地区"下拉列表和地区"下拉列表.区域下拉列表应使用jQuery根据所选国家/地区填充值.我用谷歌搜索并试图解决这个问题，但是我失败了，我做不到.有任何简单的步骤可以帮助我实现这一目标吗?
Question: i have country dropdown list and region dropdown list. Region drop downlist should be populated with values based on the chosen country using jQuery. I googled and tried to solve this problem, but i failed, i couldn't do it. Any simple steps that would help me achieve this?
这是我的摘录:
基本上，第一页加载将填充db的下拉列表并存储 会话中的列表，因此只要会话可以在应用程序级别重复使用该列表 处于活动状态.
Basically first page load will populate the drodown lists from db and also store the list in sessions so list can re-used at application level as long as the session is active.
默认国家(地区)ID和区域ID放在名为$ _SESSION ['regionID']和$ _SESSION ['countryID']的会话中
Default countryID and regionID are put in session called $_SESSION['regionID'] and $_SESSION['countryID']
if(!isset($_SESSION['countryList']))
{
$_SESSION['countryList'] = array();
}
if(!isset($_SESSION['regionList']))
{
$_SESSION['regionList'] = array();
}
.
.
.
<form action="index.php" method="GET">
<label for="lbl_country" id="countrylabel">Country</label>
<select name="country" id="countrylist" onchange="getRegions(<?php $_SESSION['regionID']; ?>)">
<?php
//fetch country list from database and store it in session
if(isset($_SESSION['countryList']) && !empty($_SESSION['countryList']))
{
foreach ($_SESSION['countryList'] as $val)
{
echo '<option value="'.$val['countryID'].'"';
if($_SESSION['countryID'] == $val['countryID'])
{
echo 'selected';
}
echo ">".$val['countryName']."</option>'";
}
}
else //means the session is not set yet-or-session is empty. Either case, we have to fetch
{
$query = "SELECT countryID, countryName FROM Country ORDER BY countryID ASC";
$results = mysql_query($query);
while ($row = mysql_fetch_assoc($results))
{
echo '<option value="'.$row['countryID'].'"';
if($_SESSION['countryID'] == $row['countryID'])
{
echo 'selected';
}
echo ">".$row['countryName']."</option>'";
$_SESSION['countryList'][] = $row;
}
}
?>
</select>
<label for="lbl_region" id="regionlabel">Region</label>
<select name="region" id="regionlist">
<?php
if(isset($_SESSION['regionList']) && !empty($_SESSION['regionList']))
{
foreach ($_SESSION['regionList'] as $val)
{
echo '<option value="'.$val['regionID'].'"';
if($_SESSION['regionID'] == $val['regionID'])
{
echo 'selected';
}
echo ">".$val['regionName']."</option>'";
}
}
else
{
$query = "SELECT regionID, countryID, regionName FROM Region WHERE countryID =".$_SESSION['countryID']." ORDER BY regionID ASC";
$results = mysql_query($query);
while ($row = mysql_fetch_assoc($results))
{
echo '<option value="'.$row['regionID'].'"';
if($_SESSION['regionID'] == $row['regionID'])
{
echo 'selected';
}
echo ">".$row['regionName']."</option>'";
//everytime you go to a loop, make sure to put the result in the session
$_SESSION['regionList'][] = $row;
}
}
?>
</select>
</form>
推荐答案
让我们举一个简单的例子，我正在使用它，它工作得很好.
Lets take an easy example, I'm using this and it works perfectly fine.
这是国家/地区下拉列表:
This is the country dropdown:
<?php
$countrylist=mysql_query("SELECT * FROM country ORDER BY name ASC");
echo "<select name='country' id='country' onchange=\"reload(this.form)\" title='Country e:g; United Kingdom,Pakistan'><option value='0'>Select Country</option>";
while($clist=mysql_fetch_array($countrylist))
{
echo "<option value='$clist[Name]'>$clist[Name]</option>"."<br/>";
}
echo "</select>";
?>
这是地区下拉列表:
<select name="region" id="region" ></select>
现在制作一个名为crlist.js的单独文件，并将其包含在具有上述代码的页面中:
Now make a seperate file named crlist.js and include it in the page having above code like this:
<script type="text/javascript" src="crlist.js"> </script>
crlist.js的代码:
code for crlist.js:
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
function fillSelect(country,path) {
var url = path+"crlist.php?country=" + country;
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}
function go() {
if (request.readyState == 4) {
//if (request.status == 200) {
var response = request.responseText;
var list=document.getElementById("region");
for (i = list.length - 1; i>=0; i--) {
list.remove(i);
}
var records=response.split('|');
for (i=1; i<records.length; i++) {
//alert("rcord="+records[i]);
var record=records[i].split('*');
var region=record[0];
//alert("region="+region);
var regionid=record[1];
//alert("regionid="+regionid);
var x=document.createElement('option');
//var y=document.createTextNode(region);
x.text=region;
//x.value=region;
//alert(x.text);
//x.appendChild(y);
//list.appendChild(x);
list.options.add(x);
}
//}
}
}
function initCs(path) {
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}
var country=document.getElementById('country');
country.onchange=function() {
if(this.value!="Select") {
var list=document.getElementById("region");
for (i = list.length - 1; i>=0; i--) {
list.remove(i);
}
//while (list.childNodes[0]) {
//list.removeChild(list.childNodes[0]);
//}
}
fillSelect(this.value,path);
//alert(this.value);
}
//fillSelect(country.value);
}
现在创建一个名为crlist.php的单独文件.
Now make a seperate file named crlist.php.
crlist.php的代码:
Code for crlist.php:
<?php
require_once 'yourconfigfile.php';
$cname = $_GET['country'];
$query="select ID,Name from city where CountryCode=(select code from country where name='$cname') Order By Name ASC";
$res = mysql_query($query) or die(mysql_error());
while($region = mysql_fetch_array($res)){
echo "<option value='".$region['Name']."'>".$region['Name']."</option>";
}
?>
现在在具有下拉菜单的页面上添加以下脚本:
Now add following script on the page having dropdowns:
<script type="text/javascript" src="crlist.js"> </script>
<script>
$(document).ready(function() {
initCs("");
});
</script>
这是我自己的脚本，我假设您已经创建了国家和地区表.但是您需要根据您的数据库结构调整查询和上面的代码.
This is my own script, and i've assumed that you have created country and region tables. But you need to tweak the queries and above code according to your db structure.
希望这会有所帮助.
这篇关于使用jQuery/PHP的级联下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
