JQuery省市聯動效果實現過程詳解
更新時間：2020年05月08日 12:04:08 作者：朱李洛克
這篇文章主要介紹了JQuery省市聯動效果實現過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
Js相關技術
JS中的數組: ["城市"]
new Array()
DOM樹操作:
- 創(chuàng)建節(jié)點: document.createElement
- 創(chuàng)建文本節(jié)點: document.createTextNode
- 添加節(jié)點: appendChild
需求分析
在我們的注冊表單中,通常我們需要知道用戶的籍貫,需要一個給用選擇的項,當用戶選中了省份之后,列出省下面所有的城市
技術分析
準備工作 : 城市信息的數據
添加節(jié)點 : 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>
步驟分析:
- 導入JQ的文件
- 文檔加載事件:頁面初始化
- 進一步確定事件: change事件
- 函數: 得到當前選中省份
- 得到城市, 遍歷城市數據
- 將遍歷出來的城市添加到城市的select中
代碼實現:
$(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 輸入框查找關鍵字并提亮顏色的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Expandable "Detail" Table Rows
Expandable "Detail" Table Rows...2007-08-08
這篇文章主要介紹了jQuery實現獲取table表格第一列值的方法,涉及jQuery針對table表格元素的遍歷與讀取相關技巧,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了JQuery實現頁面彈出框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了json格式的javascript對象用法,結合實例形式總結分析了javascript針對json格式數據操作的常見技巧,需要的朋友可以參考下2016-07-07
這篇文章主要通過代碼介紹了jQery四種靜態(tài)方法（isFunction,isArray,isWindow,isNumeric）的使用,需要的朋友可以參考下2015-07-07
這個方法把ajax方法封裝一下，方便調用2008-11-11
基于JQuery的拖動插件有幾個都相當好用，效果也很好，但再好，還是自己琢磨一個最好。所以，我的理念就是即使實際項目中使用別人的程序，自己也得根據自己的理解和想法寫一個出來。那么今天，就來看看我的思路是不是可以實現拖動排序的功能2013-10-10
有個同事問我each使用方法,我把我知道的用法告訴他.他卻說不是這樣的.如是在網上小逛了一下,果然用法有很多.下面總結下大慨的使用方法.2010-12-12
jQuery實現回車鍵（Enter）切換文本框焦點的代碼實例
這篇文章主要介紹了jQuery實現回車鍵（Enter）切換文本框焦點的代碼實例,需要的朋友可以參考下2014-05-05