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" οnchange="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  not a number
Date:
　　new Date();
常用方法:
　　toLocalString()
RegExp:正则表达式
语法:
　　直接量语法 /正则表达式/参数
　　直接量语法 /正则表达式/

　　new RegExp("正则表达式")
　　new RegExp("正则表达式","参数")
参数:
　　i:忽略大小写
　　g:全局
常用方法:
　　test() :返回值为boolean

<script>
　　var r1=/^[0-9]$/; // 直接量语法
　　var i=1;
　　　//alert(r1.test(i));// ture

　　var r2=/^[a-z0-9_-]{3,16}$/
　　var s="12";
　　　//alert(r2.test(s));//false

　　s="123"
　　alert(r2.test(s));//true
</script>

Math:
　　Math.常量|方法
Math.PI
　　Math.random() [0,1)

全局:  全局函数 直接使用 在<script></script>
★
decodeURI() 解码    某个编码的 URI。   
encodeURI() 把字符串    编 码为 URI。你好    ------------%E4%BD%A0%E5%A5%BD

Number(): 强制转换成数字

String(): 转成字符串

parseInt(): 尝试转换成整数   ? 
parseFloat(): 尝试转换成小数  ?

 

i="9.9超市"   必须是数字开头
//alert(parseInt(i));//9
//alert(parseFloat(i));//9.9

i="你好9";
//alert(parseInt(i));// NaN
//alert(parseFloat(i));// NaN

eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。

s="alert('hello')";

eval(s);//hello

转载于:https://www.cnblogs.com/nextgg/p/7717837.html