编程 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中Eval函数的使用说明

Oct 11 Javascript

jQuery .tmpl(), .template()学习资料小结

Jul 18 Javascript

js中confirm实现执行操作前弹出确认框的方法

Nov 01 Javascript

jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例

Mar 04 Javascript

JavaScript Sort 的一个错误用法示例

Mar 20 Javascript

jQuery ajax应用总结

Jun 02 Javascript

Bootstrap3使用typeahead插件实现自动补全功能

Jul 07 Javascript

使用jQuery的ajax方法向服务器发出get和post请求的方法

Jan 13 Javascript

Angularjs的启动过程分析

Jul 18 Javascript

Vue.js弹出模态框组件开发的示例代码

Jul 26 Javascript

vue中axios的封装问题(简易版拦截,get,post)

Jun 15 Javascript

JS画布动态实现黑客帝国背景效果

Nov 08 Javascript

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