溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了JQuery如何實現省市聯動效果，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
Js相關技術
JS中的數組: ["城市"]
new Array()
DOM樹操作:
需求分析
​ 在我們的注冊表單中,通常我們需要知道用戶的籍貫,需要一個給用選擇的項,當用戶選中了省份之后,列出省下面所有的城市
技術分析
準備工作 : 城市信息的數據
添加節點 : appendChild (JS)
a. append : 添加子元素到末尾
$("#div1").append("<font color='red'>this is replacing text</font>")
b. appendTo : 給自己找一個爹,將自己添加到別人家里
$("#div1").prepend("<font color='red'>this is replacing text</font>")
和第一個效果一樣
c. prepend : 在子元素前面添加
$("#div1").after("<font color='red'>this is replacing text</font>")
d. after : 在自己的后面添加一個兄弟
$("<font color='red'>this is replacing text</font>").appendTo("#div1")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
$(function () {
$("#btn1").click(function () {
// $("#div1").append("<font color='red'>this is replacing text</font>")
// $("#div1").prepend("<font color='red'>this is replacing text</font>")
$("#div1").after("<font color='red'>this is replacing text</font>")
// $("<font color='red'>this is replacing text</font>").appendTo("#div1")
});
});
</script>
</head>
<body>
<input type="button" value="click me, replace text" id="btn1">
<div id="div1">this is a text that will be replaced!</div>
</body>
</html>遍歷的操作:
<script>
var cities = ["深圳市", "東莞市", "惠州市", "廣州市"];
$(cities).each(function (i, n) {
console.log(i + "====" + n);
})
$.each(cities, function (i, n) {
console.log(i + ">>>>" + n);
})
</script>
步驟分析:
代碼實現:
$(function(){
$("#province").change(function(){
// alert(this.value);
//得到城市信息
var cities = provinces[this.value];
//清空城市select中的option
/*var $city = $("#city");
//將JQ對象轉成JS對象
var citySelect = $city.get(0)
citySelect.options.length = 0;*/
$("#city").empty(); //采用JQ的方式清空
//遍歷城市數據
$(cities).each(function(i,n){
$("#city").append("<option>"+n+"</option>");
});
});
});看完上述內容，是不是對JQuery如何實現省市聯動效果有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
