关闭

js 实现二级联动

时间: 2019-02-13阅读: 1178标签: 方法

在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>
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2005

关闭

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中有重写。有时子类并不想原封不动地继承父类的方法,而是想作一定的修改,这就需要采用方法的重写。方法重写又称方法覆盖。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!