`
cqh520llr
  • 浏览: 509818 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

JS联动控制

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>jQuery 二级联动</title>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript">
	 
	var currentShowCity=0;
	 
	$(document).ready(function(){
	   $("#province").change(function(){
	       $("#province option").each(function(i,o){
	           if($(this).attr("selected"))
	           {
	          
	               $(".city").hide();
	               $(".city").eq(i).show();
	               currentShowCity=i;
	           }
	       });
	   });
	   $("#province").change();
	});
	 
	function getSelectValue(){
	 
	     
	    alert("1级="+$("#province").val());
	      
	    $(".city").each(function(i,o){
	                    
	         if(i == currentShowCity){
	            alert("2级="+$(".city").eq(i).val());
	         }
	         
	   });
	 
	}
	 
	 
	</script>
	</head>
	  
	<body>
	  
	   <select id="province">
	       <option>----请选择省份----</option>
	       <option>北京</option>
	       <option>上海</option>
	       <option>江苏</option>
	   </select>
	   <select class="city">
	        <option>----请选择城市----</option>
	   </select>
	   <select class="city">
	       <option>东城</option>
	       <option>西城</option>
	       <option>崇文</option>
	       <option>宣武</option>
	       <option>朝阳</option>
	   </select> 
	   <select class="city">
	       <option>黄浦</option>
	       <option>卢湾</option>
	       <option>徐汇</option>
	       <option>长宁</option>
	       <option>静安</option>
	   </select>
	   <select class="city">
	       <option>南京</option>
	       <option>镇江</option>
	       <option>苏州</option>
	       <option>南通</option>
	       <option>扬州</option>
	   </select>
	 
	<INPUT TYPE="button" VALUE="点我" ONCLICK="getSelectValue();">
	 
	</body>
分享到：
| JS日历控件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS控制滚动条联动

    在网页设计中，有时我们需要实现一...在压缩包中的"JS控制滚动条联动"文件中，应该包含了具体的示例代码和实现细节，你可以进一步参考学习。通过理解和实践这些知识点，你将能够创建出更加交互性和用户友好的网页应用。

    js+jsp三级联动 源码

    压缩包中的"js + JSP 联动效果"文件可能包含以下组件：HTML文件（包含下拉框和其他UI元素）、JavaScript文件（处理用户交互和Ajax请求）、JSP文件（处理服务器端逻辑和数据查询）、CSS文件（样式控制）以及可能的...

    js三级联动

    总结起来，"js三级联动"是一种利用JavaScript动态更新下拉菜单选项的技巧，它依赖于良好的数据结构、事件监听、DOM操作和逻辑控制。通过这样的方法，我们可以在不与服务器通信的情况下，提供快速且流畅的用户界面...

    mvc+knockout.js联动

    4. **页面初始化**：在HTML页面中，可以通过JavaScript代码初始化Knockout.js的ViewModel，并绑定到MVC4控制器返回的数据。这样，当页面加载时，数据会被自动填充到相应的视图元素中。 5. **双向数据绑定**：...

    js图片联动效果

    图片轮转，通常称为图片轮播或幻灯片效果，是JavaScript联动效果的一个典型应用场景。这种效果允许一组图片按照预设的顺序自动或手动切换，为用户提供一种流畅的浏览体验。图片轮转通常包含以下关键组件： 1. 图片...

    世界主要国家地区的JS三级联动(包括国内的省市区三级联动）

    总结来说，实现世界主要国家地区的JS三级联动及下拉框的隐藏显示功能，需要对JavaScript的DOM操作、事件监听以及CSS样式有深入理解。通过合理组织数据和动态更新DOM，可以构建出高效、灵活的用户界面。在实际项目中...

    世界主要国家地区JS三级联动菜单

    通过学习和实践这个“世界主要国家地区JS三级联动菜单”，你可以提升在前端开发中的动态交互设计能力，更好地理解和掌握JavaScript在实际项目中的应用。这个资源不仅可以帮助你实现一个功能完备的菜单系统，同时也是...

    纯js实现ajax无刷新三级联动

    本项目"纯js实现ajax无刷新三级联动"旨在利用JavaScript和Ajax技术，无需页面整体刷新即可实现多级选择联动效果，这种效果常见于下拉菜单的联动筛选中。在描述中提到，此项目使用了JSON格式进行数据交换，这有助于...

    省市区3级联动纯JS(内含数据)

    “jquery-area.js”是压缩包内的一个文件，这很可能是一个基于jQuery库编写的JavaScript插件，用于实现省市区3级联动的功能。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，使得...

    三级联动 多级联动 JavaScript

    在"多级菜单联动.jsp"这个文件中，我们可以预期它包含了HTML结构（定义了多级菜单的布局和初始状态）、CSS样式（控制菜单的外观）以及JavaScript代码（实现菜单的联动逻辑）。JavaScript部分可能包含以下关键点： 1...

    世界国家，省市区，四级联动前台JS代码实现以及json数据

    1. `TestChooseAddress.js`：这是一个测试选择地址的JavaScript文件，它可能包含了实现四级联动的核心逻辑。在这个文件中，开发者可能定义了函数来处理用户在各个级别之间的交互，如点击下拉选项触发下一个级别的...

    泛微E9 JS实现流程字段联动出附件图片效果.docx

    创建一个名为`流程附件图片js.js`的脚本文件，这里主要编写JavaScript代码来处理图片的预览功能。这部分代码需要与泛微E9的API进行交互，获取到IMAGEDOCID对应的图片资源，并且在前端展示出来。同时，为了提供更好...

    多级联动菜单 div+css +js

    总结，多级联动菜单的实现涉及HTML的`div`布局、CSS的样式控制以及JavaScript的交互逻辑。掌握这些知识点，不仅能制作出功能完善的菜单系统，还能为用户提供更好的导航体验。通过不断的实践和优化，我们可以打造出...

    原生js省市三级联动

    在开发Web应用时，"原生js省市三级联动"是一个常见的功能需求，尤其在电商网站的用户收货地址填写页面中。这个功能主要是通过JavaScript实现省份、城市、区县（或街道）三个级别的下拉菜单联动，用户选择一个省份后...

    【JavaScript源代码】React实现二级联动(左右联动).docx

    本文将详细介绍如何使用JavaScript和React实现二级联动，特别是左右联动的效果。 首先，我们看到代码导入了`Component`组件，并引入了自定义样式文件`linkage.less`。`Linkage`类是React中的一个组件，它扩展了`...

    商品发布三级联动菜单js代码.zip

    综上所述，"商品发布三级联动菜单js代码" 是一种实现商品分类快速导航的前端技术，它通过JavaScript实现了用户友好、高效的交互体验。在实际项目中，结合后台数据支持，可以大大提高商城网站的用户体验和商品检索...

    js实现TreeView带复选框的联动

    ### 使用JavaScript实现TreeView中复选框的联动功能 在Web开发中，经常需要用到层次结构来展示数据，其中...通过以上步骤，可以有效地实现在TreeView中对复选框的联动控制，满足了在选择父子节点时的联动需求。

    JavaScript案例-js二级联动菜单

    总的来说，"JavaScript案例-js二级联动菜单"是一个涉及DOM操作、事件处理、CSS样式控制、数据关联以及用户体验优化等多个方面的实践项目，对于学习和提升JavaScript技能非常有帮助。通过实践这样的案例，开发者可以...

    JS写的三级联动菜单

    JavaScript（简称JS）是一种广泛...总的来说，JS编写的三级联动菜单是一个典型的前端交互案例，它展示了JS在动态数据处理和用户界面控制方面的强大能力。理解并掌握这种实现方式对于提升Web开发技能是非常有价值的。

    省、市、地区联动选择JS封装类

    这个"省、市、地区联动选择JS封装类"是一个JavaScript实现的组件，旨在简化开发者处理这种联动选择框的工作。下面我们将深入探讨这个组件的核心知识点。 首先，"省、市、地区"三级联动意味着当用户在第一级（省）...

Magicbox
Global site tag (gtag.js) - Google Analytics