溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何用jquery實現省市區聯動”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
用jquery實現省市區聯動的方法：1、創建一個HTML示例文件；2、在js文件中通過“$(function() {for(var i = 0; i < prvo.length; i++) {...}}”方法實現省市區聯動即可。
本文操作環境：windows7系統、jquery-2.1.4版、DELL G3電腦
怎么用jquery實現省市區聯動？
使用jQuery實現省市區三級聯動菜單
通過jQuery實現省市三級聯動菜單,有不足得地方還望大佬多多指導
<!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>
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實現省市區聯動”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
