DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery結合PHP+MySQL實現二級聯動下拉列表[實例]
jQuery結合PHP+MySQL實現二級聯動下拉列表[實例]
編輯:JQuery特效代碼     

jQuery結合PHP-MySQL實現二級聯動下拉列表 學生信息表的實例

實現原理:根據省份值的變動,通過jQuery把sf_id傳給後台php文件處理,php通過查詢MySQl數據庫,得到對應的地市名,並返回JSON數據給前端處理,即實現聯動效果!

為便於講解,這裡直接給出省份:河南省(sf_id=1) 浙江省(sf_id=2),而地市和學生信息則分別建立兩張數據表!編碼方式均為:utf8!新建數據庫並執行以下SQL語句!
. 代碼如下:
/* 地市表 */
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
);
/* 學生表 */
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
);接著搭個前台架子:

. 代碼如下:
<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>學生姓名</td>
<td><input type=text maxlength=20 name="xs_name" value=""></td></tr>
</table>

接著就是jQuery部分,詳解可看代碼後注釋部分:
. 代碼如下:
<script language="JavaScript">
function getVal(){
$.getJSON("select.php",{sf_id:$("#sf_id").val()},function(json){
var ds_id = $("#ds_id");
$("option",ds_id).remove(); //清空原有的選項,也可使用 ds_id.empty();
$.each(json,function(index,array){
var option = "<option value='"+array['ds_id']+"'>"+array['ds_name']+"</option>";
ds_id.append(option);
});
});
}
//下面是頁面加載時自動執行一次getVal()函數
$().ready(function(){
getVal();
$("#sf_id").change(function(){//省份部分有變動時,執行getVal()函數
getVal();
});
});
</script>

其中的select.php就是關鍵部分了,此文件接收前台通過$.getJSON方法傳遞過來的參數 sf_id,然後select.php根據省份sf_id獲取對應的地市數據,再返回JSON數據,前台通過jQuery將JSON數據進行處理,寫入<option>,即完成了聯動效果!
. 代碼如下:
$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()函數為防止中文數據庫內容亂碼!這裡還需要注意的是,select.php不得再有其它數據返回,免得JSON返回錯誤!

最後補充一下,有童鞋問這效果在添加學生信息的時候能方便使用,如果有傳遞過來的學生信息需要編輯時,不能直接顯示要編輯的學生所處的地市!這裡就需要加個判斷了:

首先將上面的:<select name="ds_id" id="ds_id" title="選擇地市"> </select>部分做個判斷
. 代碼如下:
<select name="ds_id" id="ds_id" title="選擇地市">
<?php if( isset($_GET['ds_id']) ){//返回要編輯的學生所屬的地市
$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>

然後在頁面加載時,首次執行getVal()函數前做判斷,說明看注釋部分:
. 代碼如下:
$().ready(function(){
//當$ds_id不為空,表示加載修改狀態的表單,此時就不能在頁面加載時立即調用getVal()函數,以避免無法顯示要修改的賬目所在的收支分類
<?php if( empty($ds_id) ){ ?>//當$ds_id為空,表示加載添加表單,此時要在頁面加載時立即調用getVal()函數,以顯示當前收支類型的子分類
getVal();
<?php } ?>
$("#sf_id").change(function(){
getVal();
});
});

好了,差不多結束吧!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved