js实现城市级联菜单的2种方法


Posted in Javascript onJune 23, 2017

本文实例为大家分享了js实现城市级联菜单的具体代码,供大家参考,具体内容如下

方法一:用switch方法判断。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function changeCity() {

      var x=['牛奶','豆浆','油条'];
      console.log(x.join(','));

      var y=[33,22,66,12];
      console.log(y.sort());


      //如果选择的是河南 在城市中: 洛阳 ,驻马店
      //如果选择的是河北 在城市中: 石家庄 ,保定
      var province = document.getElementById('selProvince');
      var city = document.getElementById('selCity');
      //在添加城市前,先清空上一次添加的城市
      city.length = 1;
      switch (province.value) {
        case '河南省':
          var op1 = new Option('洛阳', '洛阳');
          var op2 = new Option('驻马店', '驻马店');
          city.add(op1, null);
          city.add(op2, null);
          break;
        case '河北省':
          var op1 = new Option('石家庄', '石家庄');
          var op2 = new Option('保定', '保定');
          city.add(op1, null);
          city.add(op2, null);
          break;
      }
    }
  </script>
</head>
<body>
<form action="" name="myform">
  <select id="selProvince" onchange="changeCity( )">
    <option>--选择省份--</option>
    <option value="河南省">河南省</option>
    <option value="河北省">河北省</option>
  </select>
  <select id="selCity">
    <option>--选择城市--</option>
  </select>
</form>
</body>
</html>

方法二:用if进行判断。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    function chagecity() {
      var citylist = [];
      citylist['四川省'] = ['成都市', '郫都区'];
      citylist['广东省'] = ['深圳市', '东莞市'];
      var provinceV = document.getElementById("province").value;
      var city = document.getElementById("city");
      city.length = 1; //清除当前city中的选项
//        for (var i in citylist){
//          if (i == provinceV){
//            for (var j in citylist[i]){
//              citylist.add(new Option(citylist[i][j],citylist[i][j]),null);
//            }
//          }
//        }
      for (var i in citylist) {
        if (i == provinceV) {//判断i是不是等于province中的值
          for (var j in citylist[i]) {//遍历citylist数组
            var op = new Option(citylist[i][j], citylist[i][j]);//把定义好的数据添加到city中
            city.add(op, null);
          }
        }
      }

    }
  </script>
</head>
<body>
<form action="">
  <select name="" id="province" onchange="chagecity()">
    <option value="四川省">四川</option>
    <option value="广东省">广东</option>
  </select>
  <select id="city">
    <option value="选择城市">选择城市</option>
  </select>
</form>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
JS使用正则表达式验证身份证号码
Jun 23 #Javascript
创建简单的node服务器实例(分享)
Jun 23 #Javascript
详解微信小程序 template添加绑定事件
Jun 23 #Javascript
微信小程序 检查接口状态实例详解
Jun 23 #Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 #Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 #Javascript
微信小程序 获取二维码实例详解
Jun 23 #Javascript
You might like
ThinkPHP分页类使用详解
2014/03/05 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
制作特殊字的脚本
2006/06/26 Javascript
JS跨域代码片段
2012/08/30 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
js实现五星评价功能
2017/03/08 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
六道php面试题附答案
2014/06/05 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
python脚本框架webpy模板控制结构
2021/11/20 Python