jQuery 1.3.2 简单实现select二级联动
jQuery 1.3.2 简单实现select二级联动
<!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 src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
}
});
});
$("#province").change();
});
</script>
</head>
<body>
<select id="province">
<option>----请选择省份----
<option>北京
<option>上海
<option>江苏
</select>
<select class="city">
<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>
</body>
</html>
JQuery实现的二级联动菜单
先看页面代码
Html代码
<tr>
<td align="right" width="30%"><span class="red">*</span>短信类型:</td>
<td align="left">
<select name='city' id='first'>
<option value='-1'>==请选择类型==</option>
<#list typeList as t>
<option value='${t.id}'>${t.name}</option>
</#list>
</select>
<span id="second">
<select id="area" name="msgTypeId">
</select>
</span>
</td>
</tr>
其中id为first的下拉列表为第一个下拉列表,id为second的区域为第二个下拉列表。
JavaScript代码:
<script language="javascript">
$(function(){
$("#second").hide(); //初始化的时候第二个下拉列表隐藏
$("#first").change(function(){ //当第一个下拉列表变动内容时第二个下拉列表将会显示
var parentId=$("#first").val();
if(null!= parentId && ""!=parentId){
$.getJSON("http://localhost/msg/getSecondTypesJson",{id:parentId},function(myJSON){
var options="";
if(myJSON.length>0){
options+="<option value=''>==请选择类型==</option>";
for(var i=0;i<myJSON.length;i++){
options+="<option value="+myJSON[i].id+">"+myJSON[i].name+"</option>";
}
$("#area").html(options);
$("#second").show();
}
else if(myJSON.length<=0){
$("#second").hide();
}
});
}
else{
$("#second").hide();
}
});
});
</script>
jQuery 1.3.2 简单实现select二级联动的更多相关文章
- jquery实现select二级联动
jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 纯js做的select二级联动
分步阅读 select 联动用到的范围很广,下面介绍一下简单的二级联动 方法/步骤 做一个简单的html页面,用于显示select联动,如图所示: 设置js,点击一级选择项时,创建其下对应的二 ...
- 简单的layui二级联动
用layui实现省市二级联动, 需要注意的是使用layui之后, 你看到的下拉选框就不是option了,而是一些div 1.select表单 2.JS, ajax返回的是普通的数组
- element-ui select 二级联动
在使用select 选择框时,2个select 怎么关联在一起(第一个值发生变化,第二个select值随第一个变化而不同) 两个输入框代码 <el-form :inline="tru ...
- Struts2, jquery, select二级联动
1. 下载jquery.js文件放在webroot下js文件夹里 2. 配置struts.xml: <package name="default" namespace=&qu ...
- jQuery学习(六)——使用JQ完成省市二级联动
1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...
- js-day04--Ajax应用--二级联动
Ajax概述和实用需求 Ajax介绍/阿贾克斯:一.Ajax不是一项具体的技术,而是几门技术的综合应用. Javascript.XHTML和CSS.DOM.XML和XMLHttpRequest.二.A ...
- 简单jquery实现select三级联动
简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...
- 通同select便签实现简单的二级联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 011.Oracle数据库分页,取前10条数据
SELECT ATA FROM LM_FAULT WHERE ( OCCUR_DATE BETWEEN to_date( '2017-05-01', 'yyyy-MM-DD' ) AND to_dat ...
- Debian安装wine运行Windows软件
1.sudo dpkg --add-architecture i386,使系统支持32位应用 2.wget -nc https://dl.winehq.org/wine-builds/Release. ...
- Linux系统下的/etc/nsswitch.conf文件
一.什么是nsswithch.conf(服务搜索顺序)文件呢? nsswitch.conf(name service switch configuration,名字服务切换配置)文件位于/etc目录下 ...
- doc转docx
# -*- coding: utf-8-*- import win32com from win32com.client import Dispatch w = win32com.client.Disp ...
- R 数据框的操作
1.插入一列 根据自带数据集beaver 进行操作,比如插入一列id. > colnames(beaver1) [1] "day" "time" &quo ...
- VS Code 单文件、多文件(工程) 配置文件
针对于单文件编译运行,需要在代码文件夹下建立子文件夹 .vscode ,并放置三个文件 1:c_cpp_properties.json,注意更改7.8.11行的路径 { "configura ...
- 077-PHP数组删除元素
<?php $arr=array(98,'hello',67,'A',85,NULL); //定义一个数组 echo '删除元素之前数组中的元素个数为:'.count($arr); //输出数组 ...
- 《新标准C++程序设计》3.1.4-3.2(C++学习笔记6)
1.类型转换构造函数 (1)定义 只有一个参数,而且不是复制构造函数的构造函数,一般就可以看作是转换构造函数. 当需要的时候,编译系统会自动调用转换构造函数,建立一个无名的临时对象(或临时变量). ( ...
- IDE一直在indexing, 造成系统卡死解决方法
点击箭头指向,重启idea
- 【转载】webDriver拾级而上·之五 iframe的处理
有时候我们在定位一个页面元素的时候发现一直定位不了,反复检查自己写的定位器没有任何问题,代码也没有任何问题.这时你就要看一下这个页面元素是否在一个iframe中,这可能就是找不到的原因之一. 如果你在 ...