js06 省市聯動案例
案例6-省市聯動
需求:
選中省的時候,動態的查詢當前省下的所有市,然後展示在市的下拉選中 ?
技術分析:
數組:
////////////////////////
數組:
語法:
new Array();//長度為0
new Array(size);//指定長度的
new Array(e1,e2..);//指定元素
非官方
var arr4=["aa","bb"]; 中括號 直接寫數據
常用屬性:
length
註意:
數組是可變的 ?
數組可以存放任意值
常用方法:(了解)
存放值:對內容的操作
pop():彈 最後一個
push():插入 到最後
shift():刪除第一個
unshift():插入到首位
打印數組:
join(分隔符):將數組裏的元素按照指定的分隔符打印 默認分隔符 ，，，，
拼接數組:
concat():連接兩個或更多的數組，並返回結果。
對結構的操作:
sort();排序
reverse();反轉
////////////////////////
步驟分析:
1.省的下拉選 的選項中添加value屬性 當成數組的索引 ?
2.初始化市 ?
// 定義二維數組: 市的數組
var arr = new Array(4);
arr[0] = new Array("哈爾濱","齊齊哈爾","大慶","佳木斯");
arr[1] = new Array("長春市","吉林市","四平市","通化市");
arr[2] = new Array("沈陽市","錦州市","大連市","鐵嶺市");
arr[3] = new Array("鄭州市","洛陽市","安陽市","南陽市");
3.選擇省的時候,onchange事件 ?
<select name="pro" onchange="selCity(this.value)">
<option >-請選擇-</option>
<option value="0">黑龍江</option>
<option value="1">吉林</option>
<option value="2">遼寧</option>
<option value="3">河南</option>
</select>
<select name="city"
<option >-請選擇-</option>
</select>
4.編寫函數, ?
<script>
function selCity(index){
//alert(index);
//通過索引獲得 市的數值
var cities=arr[index];
//獲取市的下拉選
var citySelObj=document.getElementsByName("city")[0]; name返回的是數組元素
//先初始化 每次選中 對上邊的內容清空
citySelObj.innerHTML="<option >-請選擇-</option>";
//遍歷數組 組裝成option 追加到select name 為city
for(var i=0;i<cities.length;i++){
citySelObj.innerHTML+=("<option>"+cities[i]+"</option>");
}
}
</script>
通過獲取的索引獲取對象的市的數組 this.value
遍歷數組,將數組裏面的每個值組裝option 添加到select中即可
//////////////////////////////
引用類型總結:
原始類型中的String Number Boolean都是偽對象,可以調用相應的方法?
Array:數組
String:
語法:
new String(值|變量);//返回一個對象
String(值|變量);//返回原始類型
常用方法:
substring(start,end):[start,end)
substr(start,size):從索引為指定的值開始向後截取幾個
charAt(index):返回在指定位置的字符。
indexOf(""):返回字符串所在索引
replace():替換
split():切割
常用屬性:length
Boolean:
語法:
new Boolean(值|變量);
Boolean(值|變量);
非0數字 非空字符串"" 非空對象 轉成true
Number
語法:
new Number(值|變量);
Number(值|變量);
註意:
null====>0
fale====>0 true====>1
字符串的數字=====>對應的數字
其他的NaN
Date:
new Date();
常用方法:
toLocalString()
RegExp:正則表達式
語法:
直接量語法 /正則表達式/參數
直接量語法 /正則表達式/
new RegExp("正則表達式")
new RegExp("正則表達式","參數")
參數:
i:忽略大小寫
g:全局
常用方法:
test() :返回值為boolean
Math:
Math.常量|方法
Math.PI
Math.random() [0,1)
全局:
★
decodeURI() 解碼某個編碼的 URI。
encodeURI() 把字符串編碼為 URI。
Number():強制轉換成數字
String():轉成字符串
parseInt():嘗試轉換成整數
parseFloat():嘗試轉換成小數
eval() 計算 JavaScript 字符串，並把它作為腳本代碼來執行。
js06 省市聯動案例