jQuery結合PHP+MySQL實現二級聯動下拉選單[例項]

雲棲希望。發表於2017-12-10
jQueryPHPMySql

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(); 
}); 
}); 

好了，差不多結束吧！

本文轉自部落格園知識天地的部落格，原文連結：jQuery結合PHP+MySQL實現二級聯動下拉選單[例項]，如需轉載請自行聯絡原博主。


相關文章