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 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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期