Javascript知识【省市二级联动】重点

举报
爱吃豆的土豆 发表于 2022/09/25 04:33:26 2022/09/25
【摘要】 目录 💂 个人主页: 爱吃豆的土豆🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 🏆人必有所执,方能有所成! 🐋希望大家多多支持😘一起进步呀! 省市二级联动(后续三级联动) 省市二级联动...

目录

  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
  • 🏆人必有所执,方能有所成!

  • 🐋希望大家多多支持😘一起进步呀!

省市二级联动(后续三级联动)


省市二级联动(后续三级联动)

分析:

关键点:

  1. 域的值被改变时: onchange

<!--
    select框的value 取决于: 选中了哪个option,取的是该option的value值

    只有值的内容发生改变时,才能触发该事件
 -->
<select id="province" style="width:150px" onchange="alert(this.value)">
    <option value="">----请-选-择-省----</option>
    <option value="0">北京</option>
    <option value="1">吉林省</option>
    <option value="2">山东省</option>
    <option value="3">河北省</option>
    <option value="4">江苏省</option>
</select>

  1. 数据源是二维数组。(取值方式等同于java)

<script>
   // 定义二维数组,存储城市信息
   var cities = new Array();
   cities[0] = new Array("海淀区","房山区","朝阳区");
   cities[1] = new Array("长春市","吉林市","松原市","延边市");
   cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
   cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
   cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");

   //取值:  二维数组[大数组索引][小数组索引];
   alert(cities[4][3]);
</script>

 

  1. 下拉框内容体改变。innerHTML="";

步骤:

//1、页面加载完成时,为省 下拉框绑定 onchange事件

//2、onchange事件中,获取当前省 下拉框的value值

//3、以value值作为索引,获取城市列表

//4、获取市 下拉框对象 city

//5、对city数据进行初始化,回归初始状态

//6、遍历城市列表,每遍历一个城市,拼接一个option,追加到city标签内容体末尾

  1. 代码实现:
  2. <script>
       // 定义二维数组,存储城市信息
       var cities = new Array();
       cities[0] = new Array("海淀区","房山区","朝阳区");
       cities[1] = new Array("长春市","吉林市","松原市","延边市");
       cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
       cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
       cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
       //1、页面加载完成时,为省 下拉框绑定 onchange事件
       window.onload = function (ev) {
          //2、onchange事件中,获取当前省 下拉框的value值
          var province = document.getElementById("province");
          province.onchange = function (ev1) {
             //3、以value值作为索引,获取城市列表
             var arr = cities[this.value];
             //4、获取市 下拉框对象 city
             var city = document.getElementById("city");
             //5、对city数据进行初始化,回归初始状态
             city.innerHTML = "<option value=\"\">----请-选-择-市----</option>";
             //6、遍历城市列表,每遍历一个城市,拼接一个option,追加到city标签内容体末尾
             for (var i = 0; i <arr.length ; i++) {
                var option = "<option>"+arr[i]+"</option>";
                city.innerHTML+=option;
             }
          };
       };

    </script>

 1,域的值被改变时:onchange

2,数据源是二位数组。(取值方式等同于java)

3,下拉框内容体改变。innerHTML=“”。

 

文章来源: qianxu.blog.csdn.net,作者:爱吃豆的土豆,版权归原作者所有,如需转载,请联系作者。

原文链接:qianxu.blog.csdn.net/article/details/126214380

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。