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實現二級聯動下拉列表[實例]，如需轉載請自行聯系原博主。

文章

JavaScript · 關系型數據庫 · PHP · 數據庫 · 數據格式 · JSON · SQL · 前端開發 · MySQL

2017-12-10

總結

以上是生活随笔為你收集整理的jquery php联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。