一、用js写二级联动
<body>
<select id="province" onchange="getCity()">
<option>请选择：</option>
<option value="sx">山西省</option>
<option value="hb">河北省</option>
<option value="sd">山东省</option>
</select>
<select id="city">
<option>请选择：</option>
</select>
</body>
<script type="text/javascript">
var city = new Array();
city[0] = ["运城","太原","忻州"];
city[1] = ["邯郸","石家庄","保定"];
city[2] = ["济南","青岛","烟台"];
function getCity(){
var province = document.getElementById("province");
var Index = province.selectedIndex;
var c = document.getElementById("city");
//清空选项
c.length = 1;
for(var i = 0; i < city[Index - 1].length; i++){
var op = new Option(city[Index - 1][i]);
c.appendChild(op);
}
}
</script>
二、用JQuery写二级联动
<body> <select name="province" id="province"> <option>请选择省份</option> <option>山西</option> <option>山东</option> <option>河北</option> </select> <select name="city" class="city"> <option>请选择城市</option> </select> <select name="city" class="city" style="display:none;"> <option>太原</option> <option>运城</option> <option>大同</option> </select> <select name="city" class="city" style="display:none;" > <option>济南</option> <option>秦皇岛</option> <option>威海</option> </select> <select name="city" class="city" style="display:none;" > <option>邯郸</option> <option>石家庄</option> <option>衡水</option> </select> </body>
<script type="text/javascript" src="jquery-1.8.0.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#province').change(function(){
$('#province option').each(function(i){
if($(this).attr('selected')){
$('.city').hide().eq(i).show();
}
});
});
});
</script>
三、补充知识：HTML DOM selectedIndex 属性
<body> <form> Select your favorite fruit: <select id="mySelect"> <option>请选择：</option> <option>Apple</option> <option>Orange</option> <option>Pineapple</option> <option>Banana</option> </select> <br /><br /> <input type="button" onclick="getIndex()" value="被选中的索引号是"> </form> </body>
<script type="text/javascript">
function getIndex()
{
var x=document.getElementById("mySelect")
alert(x.selectedIndex)
}
</script>
相关推荐
在ASP中，二级联动和三级联动下拉框是常见的功能，通常用于实现数据的筛选和过滤，例如在地区选择、商品分类等场景。下面将详细讲解如何在ASP中实现这些功能。 ### 二级联动下拉框 二级联动下拉框是指两个下拉框...
在网页设计中，二级联动（或称为下拉菜单联动）是一种常见的交互设计方式，它通常用于数据筛选或信息选择，特别是在有层次结构的数据中。二级联动的原理是，当用户在一个下拉菜单（一级菜单）中做出选择时，另一个...
本项目"uniapp 二级联动.zip"显然是一个关于使用uniapp进行二级联动功能开发的实践案例，这在很多数据筛选、地区选择等场景中非常常见。下面，我们将深入探讨uniapp二级联动的实现原理和相关知识点。 首先，理解...
在IT行业中，二级联动是一种常见的交互设计，尤其在网页表单和数据筛选中十分常见。本文将详细讨论“下拉框二级联动”这一主题，以及如何利用AJAX和JSON技术来实现这一功能。 首先，我们要理解什么是二级联动。在...
### 下拉列表二级联动：深入解析与实现 在网页开发中，下拉列表是一种常见的用户交互元素，用于提供选项供用户选择。而“下拉列表二级联动”则是在此基础上的一种高级应用，它允许用户在选择第一个下拉列表的某个...
本压缩包“帝国CMS二级联动插件(ajax下拉列表).rar”提供的就是针对帝国CMS系统的一个二级联动插件，利用AJAX技术实现实时数据加载。AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，...
省市二级联动是一种常见的数据筛选和展示方式，在网页设计或数据库应用中经常被使用。这个"省市二级联动Access版"指的是利用Microsoft Access数据库管理系统实现的一种功能，使得用户在选择省份时，下拉菜单会动态...
在IT行业中，"php+ajax 二级联动"是一种常见的前端交互技术，主要用于构建动态、无刷新的用户界面。这种技术可以提升用户体验，因为用户在选择一个选项时，无需等待整个页面刷新，就能实时看到下级选项的变化。接...
在Android开发中，二级联动效果通常用于实现类似省市区选择的功能，它能让用户在一个区域内选择一个主选项，然后根据主选项的结果展示相应的次级选项。在这个"带有滚动效果的城市二级联动"项目中，我们主要会涉及到...
标题中的“省市二级联动代码JS”指的是在网页开发中实现的一种交互功能，它允许用户在选择省份后，自动更新下拉菜单以显示对应省份的城市，从而实现两级联动的效果。这种功能通常用于地址输入或者区域筛选等场景，...
当需要实现二级联动效果时，即一个`ComboBox`的选择会影响到另一个`ComboBox`的选项，这种功能常见于多级分类选择或筛选场景。本篇文章将深入探讨如何在C#环境下，利用这两个控件在`DataGridView`中实现二级联动。 ...
### 知识点：省市下拉框二级联动完成版（调试通过） #### 一、概述 在Web开发中，为了提供更好的用户体验与交互性，常常需要实现省市等地理位置的二级联动选择功能。所谓的“二级联动”指的是用户在选择了某个地区...
在ASP中实现数据库二级联动，通常是指在一个下拉菜单或选择框中选择一个选项后，根据该选项自动更新另一个下拉菜单或选择框的内容，这种效果在数据筛选和表单填写中非常常见。这种功能在网站的导航、筛选、查询等...
在IT领域，二级联动是一种常见的交互设计，常用于网页表单中，特别是在选择项关联的情况下。例如，当你选择一个省份时，城市会根据所选省份动态更新。这种效果可以通过JavaScript库，如jQuery，配合JSON数据来实现。...
本文将详细介绍如何使用RecyclerView实现二级联动效果，并确保选中项在列表中保持高亮状态。 首先，我们需要理解RecyclerView的基本工作原理。RecyclerView是一个高效的视图复用机制，通过ViewHolder模式减少视图...
"Spinner二级联动下拉菜单"是一个更复杂的功能，它涉及到两个Spinner，一个选择省份，另一个根据省份的选择动态加载并显示对应的城市。这个功能的实现涉及到多个知识点，下面将逐一详细讲解。 1. **Spinner基本使用...
在这个"Java实现Map集合二级联动示例中国省市例子"中，我们将探讨如何使用Map来构建一个二级联动的功能，常见于如中国省市选择的场景。这个场景通常出现在需要用户首先选择省份，然后根据所选省份展示对应的市的选择...
在Android开发中，二级联动是一种常见的用户界面设计，通常用于实现多级选择或者筛选功能，例如省份-城市、类别-子类别的选择等。这种设计能够有效地帮助用户在大量数据中快速定位到所需的信息。本篇文章将深入探讨...
在网页开发中，二级联动是一种常见的交互设计，用于实现下拉菜单之间依赖关系的无刷新更新。例如，选择一个省份后，城市下拉菜单会自动更新为与该省份相关的城市。这种功能通常由Ajax（Asynchronous JavaScript and ...
在网页设计中，二级联动下拉菜单是一种常见的交互元素，常用于分类选择或者地区筛选等场景。这种功能的实现通常涉及到前端和后端的交互，其中PHP作为后端语言，负责处理数据并返回给前端。本篇文章将详细介绍如何...