在web开发中我们经常会遇到页面的一个二级联动技术,二级联动字面解释就是说我在选择一级select不同的option,下面的二级option的属性值在进行相应的变化。
onchange 事件
<body>
<select id="province" onchange="func1()">
<option value="shandong">山东</option>
<option value="hebei">河北</option>
<option value="beijing">北京</option>
</select>
</body>
<script>
function func1(){
var pro = document.getElementById("province");
console.log(pro.value)
}
</script>
使用字典方式添加数据
一级数据显示
<body>
<select id="province" >
</select>
</body>
<script>
data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
var pro = document.getElementById("province");
for (var i in data){
var option_pro = document.createElement("option");
option_pro.innerhtml=i;
pro.appendChild(option_pro);
}
</script>
二级数据联动 方式一
<body>
<select id="province" onchange="func1(this)" >
</select>
<select id="city"></select>
</body>
<script>
data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
var pro = document.getElementById("province");
var city = document.getElementById("city");
for (var i in data){
var option_pro = document.createElement("option");
option_pro.innerhtml=i;
pro.appendChild(option_pro);
}
function func1(self){
//console.log((self.options[self.selectedIndex]).innerHTML);
var choice = (self.options[self.selectedIndex]).innerHTML;
var options = city.children;
for (var k=0; k<options.length; k++){
city.removeChild(options[k--]);
}
for (var i in data[choice]){
var option_city = document.createElement("option");
option_city.innerHTML = data[choice][i];
city.appendChild(option_city);
}
}
</script>二级数据联动 方式二
<body>
<select id="province" onchange="func1(this)" >
</select>
<select id="city"></select>
</body>
<script>
data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
var pro = document.getElementById("province");
var city = document.getElementById("city");
for (var i in data){
var option_pro = document.createElement("option");
option_pro.innerHTML=i;
pro.appendChild(option_pro);
}
function func1(self){
//console.log((self.options[self.selectedIndex]).innerHTML);
var choice = (self.options[self.selectedIndex]).innerHTML;
city.options.length=0;
for (var i in data[choice]){
var option_city = document.createElement("option");
option_city.innerHTML = data[choice][i];
city.appendChild(option_city);
}
}
</script>关闭
Number 常用方法汇总
toExponential()把对象的值转换为指数计数法。toFixed()把数字转换为字符串，并对小数点指定位数。toLocaleString()把数字转换为字符串，使用本地数字格式顺序。
什么是javascript的私有方法？
私有方法是只有父类可以访问的方法和属性，他与静态方法一致，只是表现形式不一样。构造器中的var变量和参数都是私有方法。私有成员由构造函数生成。构造函数的普通变量和参数成为私有成员。
js常用扩展方法
在日常的开发过程中，经常会碰到javaScript原生对象方法不够用的情况，所以经常会对javaScript原生方法进行扩展。下面就是在实际工作时，经常使用的一些方法，做一下记录，有需要的可以拿去。
JS对象常用方法总结
charAt()返回在指定位置的字符;charCodeAt()返回咋指定位置的字符的Unicode编码;concat()连接字符串;indexOf()检索字符串，返回的是字符在字符串的下标
在一个JS文件中引用另一个JS文件的方法
在调用文件的顶部加入下例代码：document.write；我们可以在某个html中引用了你需要的js文件，我们可以通过拿到那个html文件的对象，然后在通过这个对象去引用js的方法。
JS获取当前时间戳的方法
第一种：获取的时间戳是把毫秒改成000显示，因为这种方式只精确到秒，第二种和第三种是获取了当前毫秒的时间戳。
Js的string.search()方法怎么用？
string.search()是JavaScript中的一个内置方法，用于搜索正则表达式和给定字符串对象之间的匹配。返回值：返回正则表达式与给定字符串对象之间的第一个匹配的索引，如果未找到匹配项则返回-1。
JavaScript中Array.find()方法如何使用？
find()方法返回通过测试（函数内判断）的数组的第一个元素的值。当数组中的元素在测试条件时返回 true 时, find()返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回undefined。
一盏茶的时间，快速捕获JS中常用的方法
本次整理希望可以帮助到需要的童鞋，闲暇无聊多瞅几眼保证能记住（记不住欢迎下方戳小编，小编一定给各位大佬寄“拖鞋”）。因为js这类的方法（技巧）总有新玩法，本篇文档会持续更新，建议收藏。
Javascript有重写吗？
JavaScript中有重写。有时子类并不想原封不动地继承父类的方法，而是想作一定的修改，这就需要采用方法的重写。方法重写又称方法覆盖。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!