怎麼用jquery實現省市區連動
- 藏色散人原創
- 2021-12-01 10:55:053992瀏覽
用jquery實作省市區連動的方法：1、建立一個HTML範例檔；2、在js檔中透過「$(function() {for(var i = 0; i < prvo. length; i ) {...}}」方法實作省市區連動即可。
#本文操作環境：windows7系統、jquery-2.1.4版、DELL G3電腦
怎麼用jquery實現省市區連動？
使用jQuery實現省市區三級連動選單
#透過jQuery實現省市三級連動選單,有不足得地方也望大佬多多指導
HTML頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>省市区联动菜单</title> </head> <body> <!--选择省--> <select id="prvoince"> <option>--请选择省份--</option> </select> <!--选择市--> <select id="city"> <option>--请选择城市--</option> </select> <select id="district"> <option>--请选择区--</option> </select> <script src="jquery.js" type="text/javascript"> </script> <script type="text/javascript" src="js/jq.js"> </script> </body> </html>
js頁面
var prvo = [
"山西", "四川"];var cit = [
["太原市", "吕梁市", "临汾市", "运城市", "阳泉市"],
["成都市", "绵阳市", "雅安市", "乐山市", "眉山市"]];var dis = [
[
["小店区", "迎泽区"],
["吕梁1", "吕梁2"],
["临汾1", "临汾2"],
["运城1", "运城2"],
["阳泉1", "阳泉2"]
],
[
["成都1", "成都2"],
["绵阳1", "绵阳2"],
["雅安1", "雅安2"],
["乐山1", "乐山2"],
["眉山1", "眉山2"]
]]$(function() {
//初始化省份
for(var i = 0; i < prvo.length; i++) {
//每次循环加一个option标签
$("#prvoince").append("<option>" + prvo[i] + "</option>")
}
//---on---在选择元素上绑定一个或多个事件的事件处理函数
//加入change事件使在省发生改变时 发生改变
$("#prvoince").on('change', function() {
//清除元素,将上一次选择的内容清除掉,开始新一轮的选择
//$('#city').empty()
$('#city').text(' ');
$('#district').text(' ');
//利用选择器中的 :selected 方法匹配到所有的元素,然后再用index方法获得下标
//得到被选中省份的下标
var proIndex = $("#prvoince option:selected").index();
var citys = cit[proIndex - 1]
for(var i = 0; i < citys.length; i++) {
$("#city").append("<option>" + citys[i] + "</option>")
//[this.value]
}
})
$("#city").on('change',function(){
$("#district").empty()
var proIndex = $("#prvoince option:selected").index();
var citIndex = $("#city option:selected").index()
var distr = dis[proIndex - 1][citIndex]
for (var i = 0; i < distr.length; i++) {
$("#district").append("<option>" + distr[i]+ "</option>")
}
})})#推薦學習：《jquery影片教學》
以上是怎麼用jquery實現省市區連動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn