快捷導(dǎo)航

jQuery結(jié)合PHP+MySQL實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉列表[實(shí)例]

更新時(shí)間：2011年11月15日 16:30:19 作者：

二級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)方法還真不少，實(shí)用性也很強(qiáng)，這里結(jié)合一個(gè)學(xué)生信息表的實(shí)例，來分享一下我的實(shí)現(xiàn)過程

jQuery結(jié)合PHP-MySQL實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉列表學(xué)生信息表的實(shí)例

實(shí)現(xiàn)原理：根據(jù)省份值的變動(dòng)，通過jQuery把sf_id傳給后臺(tái)php文件處理，php通過查詢MySQl數(shù)據(jù)庫(kù)，得到對(duì)應(yīng)的地市名，并返回JSON數(shù)據(jù)給前端處理，即實(shí)現(xiàn)聯(lián)動(dòng)效果！

為便于講解，這里直接給出省份：河南省(sf_id=1) 浙江省(sf_id=2)，而地市和學(xué)生信息則分別建立兩張數(shù)據(jù)表！編碼方式均為：utf8！新建數(shù)據(jù)庫(kù)并執(zhí)行以下SQL語(yǔ)句！

復(fù)制代碼代碼如下:

 
/* 地市表 */ 
create TABLE IF NOT EXISTS `dishi`( 
`ds_id` int(3) auto_increment not null primary key, 
`sf_id` int(3) not null default '0', 
`ds_name` varchar(50) not null 
); 
/* 學(xué)生表 */ 
create TABLE IF NOT EXISTS `xuesheng`( 
`xs_id` int(3) auto_increment not null primary key, 
`ds_id` int(3) not null default '0', 
`xs_name` varchar(50) not null 
);接著搭個(gè)前臺(tái)架子： 

復(fù)制代碼代碼如下:

 
<table border="0" width="100%"> 
<tr> 
<td width=100>省份</td> 
<td> 
<select name="sf_id" id="sf_id" title="選擇省份"> 
<option value="1">河南省</option> 
<option value="2">浙江省</option> 
</select> 
</td> 
</tr> 
<tr> 
<td>地市</td> 
<td> 
<select name="ds_id" id="ds_id" title="選擇地市"> 

</select> 
</td> 
</tr> 
<tr> 
<td>學(xué)生姓名</td> 
<td><input type=text maxlength=20 name="xs_name" value=""></td></tr> 
</table> 

接著就是jQuery部分，詳解可看代碼后注釋部分：

復(fù)制代碼代碼如下:

 
<script language="JavaScript"> 
function getVal(){ 
$.getJSON("select.php",{sf_id:$("#sf_id").val()},function(json){ 
var ds_id = $("#ds_id"); 
$("option",ds_id).remove(); //清空原有的選項(xiàng)，也可使用 ds_id.empty(); 
$.each(json,function(index,array){ 
var option = "<option value='"+array['ds_id']+"'>"+array['ds_name']+"</option>"; 
ds_id.append(option); 
}); 
}); 
} 
//下面是頁(yè)面加載時(shí)自動(dòng)執(zhí)行一次getVal()函數(shù) 
$().ready(function(){ 
getVal(); 
$("#sf_id").change(function(){//省份部分有變動(dòng)時(shí)，執(zhí)行g(shù)etVal()函數(shù) 
getVal(); 
}); 
}); 
</script> 

其中的select.php就是關(guān)鍵部分了，此文件接收前臺(tái)通過$.getJSON方法傳遞過來的參數(shù) sf_id，然后select.php根據(jù)省份sf_id獲取對(duì)應(yīng)的地市數(shù)據(jù)，再返回JSON數(shù)據(jù)，前臺(tái)通過jQuery將JSON數(shù)據(jù)進(jìn)行處理，寫入<option>，即完成了聯(lián)動(dòng)效果！

復(fù)制代碼代碼如下:

 
$sf_id = $_GET["sf_id"]; 
if(isset($sf_id)){ 
$q=mysql_query("select * from dishi where sf_id = $sf_id"); 
while($row=mysql_fetch_array($q)){ 
$select[] = array("ds_id"=>$row['ds_id'],"ds_name"=>urlencode($row['ds_name'])); 
} 
echo urldecode(json_encode($select)); 
} 

其中的urlencode()、urldecode()函數(shù)為防止中文數(shù)據(jù)庫(kù)內(nèi)容亂碼！這里還需要注意的是，select.php不得再有其它數(shù)據(jù)返回，免得JSON返回錯(cuò)誤！

最后補(bǔ)充一下，有童鞋問這效果在添加學(xué)生信息的時(shí)候能方便使用，如果有傳遞過來的學(xué)生信息需要編輯時(shí)，不能直接顯示要編輯的學(xué)生所處的地市！這里就需要加個(gè)判斷了：

首先將上面的：<select name="ds_id" id="ds_id" title="選擇地市"> </select>部分做個(gè)判斷

復(fù)制代碼代碼如下:

 
<select name="ds_id" id="ds_id" title="選擇地市"> 
<?php if( isset($_GET['ds_id']) ){//返回要編輯的學(xué)生所屬的地市 
$sql="SELECT * FROM dishi WHERE ds_id=".$ds_id; 
$resultds=mysql_query($sql,$conn); 
while($listds=mysql_fetch_array($resultds)){ ?> 
<option value="<?php echo $listds['ds_id'] ?>" <?php if( $listds['ds_id']==$ds_id ){ echo 'selected="selected"'; } ?> name="ds_id"><?php echo $listds['ds_name'] ?></option> 
<?php } ?> 
<?php } ?> 
</select> 

然后在頁(yè)面加載時(shí)，首次執(zhí)行g(shù)etVal()函數(shù)前做判斷，說明看注釋部分：

復(fù)制代碼代碼如下:

 
$().ready(function(){ 
//當(dāng)$ds_id不為空，表示加載修改狀態(tài)的表單，此時(shí)就不能在頁(yè)面加載時(shí)立即調(diào)用getVal()函數(shù)，以避免無(wú)法顯示要修改的賬目所在的收支分類 
<?php if( empty($ds_id) ){ ?>//當(dāng)$ds_id為空，表示加載添加表單，此時(shí)要在頁(yè)面加載時(shí)立即調(diào)用getVal()函數(shù)，以顯示當(dāng)前收支類型的子分類 
getVal(); 
<?php } ?> 
$("#sf_id").change(function(){ 
getVal(); 
}); 
}); 

好了，差不多結(jié)束吧！

您可能感興趣的文章: