编程 Javascript

JavaScript省市级联下拉菜单实例

Posted in Javascript onFebruary 14, 2017

最近学了一个关于省市级联简单的小例子，贴出来与大家分享一下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>index</title>
</head>
<body>
 <select id="selProvince" onchange="changeCity()">
  <option>请选择省份</option>
 </select>
 <select id="selCity">
  <option>请选择城市</option>
 </select>
 <script>
  function $(ID){
  return document.getElementById(ID);
  }
  var cityList=new Array();
  cityList['北京市']=['东城区','西城区','昌平区'];
  cityList['河北省']=['保定','石家庄','定州'];
   cityList['江苏省'] = ['南京市','苏州市','无锡市'];
   cityList['浙江省'] = ['杭州市','宁波市','温州市'];
   cityList['四川省'] = ['四川省','成都市'];
   cityList['海南省'] = ['海口市'];
  function changeCity(){
   var province=$("selProvince").value;
   var city=$("selCity");
    city.options.length=0;
   for (var i in cityList) {
   if(i==province){
    for (var j in cityList[i]) {
     city.add(new Option(cityList[i][j],cityList[i][j]),null);
    }
   }
   }
  }
  function allCity(){
   var province=$("selProvince");
   for (var i in cityList) {
    province.add(new Option(i,i),null);
   }
  }

  window.onload=allCity;
 </script>
</body>
</html>

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

- Author -

梵音与笙

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 禁止复制网页

Jun 11 Javascript

IE中jquery.form中ajax提交没反应解决方法分享

Sep 11 Javascript

探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行

Jul 09 Javascript

用unescape反编码得出汉字示例

Apr 24 Javascript

Immutable 在 JavaScript 中的应用

May 02 Javascript

JavaScript中原型链存在的问题解析

Sep 25 Javascript

JavaScript组成、引入、输出、运算符基础知识讲解

Dec 08 Javascript

vue实现列表的添加点击

Dec 29 Javascript

javascript html5轻松实现拖动功能

Mar 01 Javascript

vue动态路由实现多级嵌套面包屑的思路与方法

Aug 16 Javascript

vue实现购物车的监听

Apr 20 Javascript

vue.js实现点击图标放大离开时缩小的代码

Jan 27 Vue.js

jqGrid翻页时数据选中丢失问题的解决办法

Feb 13 #Javascript

jQuery实现用户输入自动完成功能

Feb 13 #Javascript

微信小程序详解页面跳转与返回并回传数据

Feb 13 #Javascript

微信小程序 this和that详解及简单实例

Feb 13 #Javascript

脚本div实现拖放功能(两种)

Feb 13 #Javascript

bootstrap table 数据表格行内修改的实现代码

Feb 13 #Javascript

判断横屏竖屏（三种）

Feb 13 #Javascript