`

级联菜单,省市级联菜单

阅读更多
<html>
<head>
  <title> new document </title>
<script language="javascript">
  function createProvince(){
      //所有省份的数组
  var provinces = ['--请选择省份--','北京市', '福建省', '湖北省'];
  //获取文档中省份这个列表框元素对象
     var province=document.myform.province;
     for(var i = 0; i < provinces.length; i++){
    //往省份的选项组中添加选项
        province.options.add(new Option(provinces[i], provinces[i]));
}
  }

  function createcity(){
var citylist = new Array();
citylist['--请选择省份--'] = ['--请选择城市--'];
     citylist['北京市'] = ['东城区', '西城区', '海淀区', '朝阳区', '大兴区', '昌平区', '怀柔'];

citylist['福建省'] = ['福州市', '厦门市', '泉州市', '龙岩市', '三明市'];
     citylist['湖北省'] = ['武汉', '宜昌', '襄樊', '黄石', '黄冈', '十堰'];
//获得选中的省份值
var selectedProv=document.myform.province.value;
var cityOption;
//清空城市列表框中原来的所有选项
document.myform.city.options.length=0;
//添加对应省份的所有城市
for (var city = 0; city < citylist[selectedProv].length; city++) {
        //构造选项
cityOption = new Option(citylist[selectedProv][city], citylist[selectedProv][city]);
document.myform.city.options.add(cityOption);
     }
  }
</script>
</head>

<body onload="createProvince()">
<form name="myform" >
  <select name="province" id="province" onchange="createcity()">
  </select>
  <select name="city" id="city">
      <option>--请选择城市--</option>
  </select>
</form>
</body>
</html>
分享到:
评论
1 楼 一湖碧波 2011-05-30  
very good

相关推荐

    javascript实现级联菜单

    javascript实现省市级联菜单的效果

    省市级联菜单

    在IT行业中,省市级联菜单是一种常见的用户界面元素,尤其在网页或应用程序中,用于让用户选择省份和城市。这种交互方式能够有效地节省空间并...通过不断地学习和实践,开发者可以创建出更加智能、用户友好的级联菜单。

    级联菜单插件

    级联菜单插件是一种常用的网页交互元素,常用于在网页中实现下拉式的多级选择功能,例如在省市区选择、分类导航等场景。在给定的标题和描述中,我们可以看到这种插件主要与jQuery库相关,因此我们将重点探讨jQuery...

    很好用的js省市级联菜单

    **很好用的js省市级联菜单** 在网页开发中,级联菜单(Cascading Dropdown Menu)是一种常见的交互设计元素,常用于展示层次结构的数据,如中国的省市区选择。JavaScript作为客户端脚本语言,能够轻松实现动态交互...

    级联菜单全国省市县三级导航

    在级联菜单中,用户首先选择省份,接着展开对应的市级菜单,最后再选择具体的县级区域,从而实现快速定位。 构建这样的级联菜单通常涉及以下技术点: 1. **HTML 结构**:HTML 是网页的基础,级联菜单的框架由`&lt;ul&gt;...

    三级行业动态无刷新 级联菜单

    这种技术常用于构建如省市级联菜单,让用户在选择时无需等待页面刷新,提高网站交互性和效率。 无刷新,即Ajax(Asynchronous JavaScript and XML)技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据...

    HTML中JavaScript版省市级联

    "HTML中JavaScript版省市级联"是一个常见的前端技术应用,用于实现动态的省市区选择功能。在这个场景下,用户可以从一个下拉菜单中选择省份,然后根据所选省份自动更新市、区的下拉选项。这种功能在注册、地址填写等...

    省市联动级联菜单

    省市联动级联菜单是一种常见的前端交互设计,常用于地址选择、地区筛选等场景。这个功能主要是通过JavaScript实现的,不需要数据库支持,所有的省份和城市数据都存储在JS文件中。这种方式简化了系统的复杂性,降低了...

    js省市级联下拉菜单

    在网页开发中,省市级联下拉菜单是一种常见的交互元素,用于用户选择所在省份和城市。这种菜单的设计目的是节省页面空间并提供清晰的导航。在本案例中,我们主要讨论如何使用JavaScript实现这样的功能。 首先,我们...

    国家省市级联菜单国家省市级联菜单

    根据给定的信息,我们可以推断出这是一段与创建级联菜单相关的代码示例,主要涉及的是国家(这里为美国)及其下辖各州和部分城市的层级关系数据组织方式。下面将详细介绍这段代码中所涉及的关键知识点。 ### 1. ...

    省市级联三级菜单网页特效

    在网页设计中,省市级联三级菜单是一种常见的交互效果,用于展示地区层级关系,例如中国的省级、市级和县级。这种菜单通常应用于用户填写地址、选择配送区域或进行其他地域相关操作时,使得用户能快速、准确地定位到...

    省市级联代码纯Javascript(含源代码,测试通过)

    总的来说,这个“省市级联代码纯Javascript”资源提供了一种无服务器依赖的级联效果实现,开发者可以通过学习和应用这个代码,提升自己的JavaScript技能,同时也能优化Web应用的性能和用户体验。通过深入理解这些...

    js级联菜单实现全国省市下拉菜单

    全国省市级联下拉菜单 &lt;script src="test2.js" defer&gt;&lt;/script&gt; 选择省份: (this)"&gt; &lt;!-- 省份数据将动态插入这里 --&gt; 选择城市: &lt;!-- 城市数据将根据省份选择动态插入这里 --&gt; ``` JavaScript...

    js省市级联

    "省市级联"是一个常见的前端功能,主要用于实现用户在选择省份时,下拉菜单自动更新对应的城市选项,从而提供更加便捷的用户输入体验。这种功能在注册、地址填写等场景中非常常见。 在给定的"js省市级联"项目中,它...

    XML省市级联

    在IT行业中,XML因其灵活性和易读性而广泛应用于各种应用场景,包括构建省市级联选择功能。在这个项目中,“XML省市级联”意味着我们使用XML文件来存储和管理省份和城市的数据,然后通过Dreamweaver这一流行的网页...

    经典Ajax省市级联菜单

    【经典Ajax省市级联菜单】是一个利用Ajax技术实现的交互式菜单系统,它通过与后台服务器的异步通信,实现了省市区数据的动态加载。在这个系统中,用户选择省份时,Ajax会向服务器发送请求,服务器响应后返回对应省份...

    全国省市级联下拉菜单

    标题 "全国省市级联下拉菜单" 暗示了这是一个网页开发相关的项目,它涉及到在没有使用数据库的情况下,创建一个动态的、无刷新的中国省市联动选择菜单。这种功能通常用于用户输入地址或者选择地理位置时,提供方便的...

    django实现省市县级联菜单

    在本文中,我们将深入探讨如何使用Django框架实现省市县级联菜单。Django是一个功能强大的Python Web开发框架,以其高效、简洁和可扩展性而受到广泛赞誉。在Web应用程序中,级联下拉菜单通常用于表示地理位置信息,...

    省市级联;最新的省市区数据包

    在省市级联的场景下,jQuery可以用来动态加载和展示下拉菜单,实现用户选择某一省级行政区后,自动加载对应的市级行政区,再进一步加载区县级行政区的联动效果。 为了实现这样的功能,开发者可能需要编写以下步骤的...

    通用省市级联菜单(只要改一下省和市的名字)

    标题中的“通用省市级联菜单”指的是一个软件或网页开发中的功能模块,它通常用于用户在选择地址时提供逐级下拉的选择体验,比如选择国家、省份、城市等。这种菜单设计可以方便用户快速准确地定位到自己的位置,同时...

Global site tag (gtag.js) - Google Analytics