jquery實現二級聯動

2021-06-19 11:17:23 字數 1296 閱讀 7113

實現原理:根據省份值的變動,通過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

);接著搭個前台架子:

省份河南省

浙江省地市

學生姓名

接著就是jquery部分,詳解可看**後注釋部分:

其中的select.php就是關鍵部分了,此檔案接收前台通過$.getjson方法傳遞過來的引數 sf_id,然後select.php根據省份sf_id獲取對應的地市資料,再返回json資料,前台通過jquery將json資料進行處理,寫入,即完成了聯動效果!

$sf_id = $_get["sf_id"];

if(isset($sf_id))

echo urldecode(json_encode($select));

}其中的urlencode()、urldecode()函式為防止中文資料庫內容亂碼!這裡還需要注意的是,select.php不得再有其它資料返回,免得json返回錯誤!

首先將上面的:部分做個判斷

<?php if( isset($_get['ds_id']) ) ?> name="ds_id"><?php echo $listds['ds_name'] ?>

<?php }    ?>

<?php } ?>

然後在頁面載入時,首次執行getval()函式前做判斷,說明看注釋部分:

$().ready(function() ?>

$("#sf_id").change(function());

});

jquery實現select二級聯動

jquery實現乙個簡單的select二級聯動選單,如下 1 doctype html 2 html 3 head 4 meta charset utf 8 5 title jquery 二級聯動 title 6 style 7.city 10.city first 13style 14 scrip...

jQuery二級聯動 本地

html html head lang en meta charset utf 8 script src js jquery 1.11.3.js script title 二級聯動案例 title style select province style head body select id pro...

jquery實現省市二級聯動選單

pro city.php 初始頁面 省市二級聯動 請選擇省份 conn mysql connect localhost root root 連線資料庫 mysql query set names utf8 mysql select db bbs rs mysql query select id,cn...