关闭

js 实现二级联动

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

在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

关闭

js中math方法_整理js中常用的math方法总结

记录下与Math有关的常用方法,如:求最大值、最小值等,或者是保留几位数啥的。本文主要介绍了JavaScript中Math对象的方法,具有一定的参考价值,下面跟着小编一起来看下吧

JS实现碰撞检测的方法分析

本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考,具体如下:一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色

JS中toFixed()方法的四舍五入问题解决方法

最近发现JS当中toFixed()方法存在一些问题,采用原生的Number对象的原型对象上的toFixed()方法时,规则并不是所谓的四舍五入

Js手动实现call和apply方法

需要考虑传入的thisArg的多种类型,将函数设置成thisArg的属性,来实现this的绑定,调用完成后需要delete该属性,使用eval来实现需要传参给该函数的情况

js async的常用方法

async函数是Generator 函数的语法糖,async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。async函数对Generator 函数的改进点有以下几点:

自定义Buffer方法

Buffer类,是用来创建一个专门存放二进制数据的缓存区。每当需要处理二进制数据时,就有可能使用到Buffer类。Buffer存在于全局对象上,是必须要了解和掌握的知识。

String 常用方法汇总

charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 编码。concat()连接两个或更多字符串,并返回新的字符串。indexOf()返回某个指定的字符串值在字符串中首次出现的位置。

前端常用60余种工具方法

邮箱,是否url地址,是否Symbol函数,是否Promise对象,是否Set对象,是否是微信浏览器,是否是爬虫,动态引入js,根据url地址下载

Js的string.search()方法怎么用?

string.search()是JavaScript中的一个内置方法,用于搜索正则表达式和给定字符串对象之间的匹配。返回值:返回正则表达式与给定字符串对象之间的第一个匹配的索引,如果未找到匹配项则返回-1。

在一个JS文件中引用另一个JS文件的方法

在调用文件的顶部加入下例代码:document.write;我们可以在某个html中引用了你需要的js文件,我们可以通过拿到那个html文件的对象,然后在通过这个对象去引用js的方法。

点击更多...

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