jQuery_完成省市二级联动
当填表的时候会让你设计某省某市怎么设计，应该明白，如果你选择了一个确定的省，那么在第二个下拉框内则不会有除了你选择的省的市之外的名称。而这功能用js来实现很麻烦，但是用jq确很容易实现。
原表结构：
代码如下：
<!DOCTYPE html>
<html>
<head>
<script typr="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
var cities=new Array(3);
cities[0]=new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1]=new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2]=new Array("石家庄市","邯郸市","唐山市","秦皇岛市");
cities[3]=new Array("郑州市","洛阳市","开封市","安阳市");
$(function() {
$("#province").change(function() {//change时间，表示下拉框的内容改变，则会提示点击了省份
// alert("点击了省份");
var val=this.value;//获取用户选择的省份
// alert(val);
$.each(cities,function(i,n){//遍历城市
// alert(i+" "+n);
if(val==i){//如果相等
$.each(cities[i],function(j,m){//遍历第二个下拉框内容
// alert(m);
var textNode =document.createTextNode(m);//创建城市的文本节点
var opele=document.createElement("option");//创建option元素节点
$(opele).append(textNode);//将城市文本节点添加到option元素中
$(opele).appendTo($("#city"));//将内容添加到第二个下拉框中，使用id选择器。 }) } }) });
});
</script> <meta charset="UTF-8">
<title>使用jQuery完成省市二级联动</title>
<style type="text/css">
.top {
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
} #clear {
clear: both;
} #menu {
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
} #menu ul li {
display: inline;
color: white;
font-size: 19px;
} #bottom {
text-align: center;
} #contanier {
border: 1px solid red;
width: 99%;
height: 600px;
background: url(../img/regist_bg.jpg);
position: relative;
} #content {
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
}
</style>
<script src="../js/check1.js"></script> </head>
<body>
<div>
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0"
width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center"><font size="5">会员注册</font></td> </tr>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"
onfocus="showTips('username','必须以字母开头')"
onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"
onfocus="showTips('password','密码长度不能低于6位！')"
onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repassword" /></td>
</tr>
<tr>
<td>email</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" name="name" /></td>
</tr>
<!--1.编写HTML文件部分的内容-->
<tr>
<td>籍贯</td>
<td>
<!--2.确定事件，通过函数传参的方式拿到改变后的城市--> <select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select> <select id="city"> </select>
</td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男" />男 <input
type="radio" name="sex" value="女" />女</td>
</tr>
<tr>
<td>出生日期</td>
<td><input type="text" name="birthday" /></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" name="yanzhengma" /> <img
src="../img/yanzhengma.png" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册" /></td>
</tr>
</form>
</table>
</div>
</div>
</div>
</body>
</html>
运行结果
体会：完成一个项目可能有很多方法，但是有的简单，有的困难，因此要选取简单的进行使用。
另外，每次完成一小步，就要检测一次，哪怕最后注释掉，也不要认为自己能一蹴而成，因为一步一步完成出错好改，但是全都完成了，找错都不容易找出来，更别说改错了，因此要养成这个好习惯。
jQuery_完成省市二级联动的更多相关文章
- 省市二级联动（原生JS）
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- 省市二级联动--使用app-jquery-cityselect.js插件
只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...
- 微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...
- JavaScript 实现省市二级联动
JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...
- js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
- jquery ajax实现省市二级联动
今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...
- 用jquery+Asp.Net实现省市二级联动
页面html: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ddlAjax. ...
- jquery 实现省市二级联动，附带完整的省市json数据 （粘贴即用）
1.可以单独定义一个js,保存省市json数据. citydata = { "安徽": [ "合肥", "芜湖", "蚌埠&quo ...
随机推荐
- Leetcode 38.报数 By Python
报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作 "one 1" ...
- for (;;) 与 while (true)，哪个更快？
Java技术栈 www.javastack.cn 优秀的Java技术公众号 在 JDK8u 的 jdk 项目下做个很粗略的搜索: mymbp:/Users/me/workspace/jdk8u/jdk ...
- Jquery复习（二）之stop()易忘点
jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法:$ ...
- YOLOv3训练过程笔记
本人使用的是linux平台,按照YOLO网页0https://pjreddie.com/darknet/yolo/的步骤操作进行下载darkenet程序包以及编译,之后可尝试用VOC2007的数据集测 ...
- luogu P4076 [SDOI2016]墙上的句子
luogu loj 题意看了我半天(逃 (应该是我语文太差了) 题意是要确定每一行和每一列的看单词的顺序,使得同时正着出现和反着出现在里面的单词数量最少,每行和每列的性质是这一行所有单词反过来的单词要 ...
- 错误代码errno值的含义
错误代码errno值的含义 查看错误代码errno是调试程序的一个重要方法.当C api函数发生异常时,一般会将errno变量(需include errno.h)赋一个整数值,不同的值表示不同的含义, ...
- passwd 修改用户密码 / chpasswd 批量更新用户密码
passwd 修改用户密码 1.命令功能 passwd 修改用户密码及密码过期时间等信息. 2.语法格式 passwd option username passwd 选项 用户名 选项说明 ...
- Registry key 'Software\JavaSoft\Java Runtime Environment\CurrentVersion' has value '1.8', but '1.7'
第一种方法:安装1.8之前安装了1.7,将1.7卸载就好了. 第二种方法:删掉Windows\System32下的java.exe, javaw.exe 就行了,但是安装的1.8的jdk会回到1.7的 ...
- MYSQL explain详解[转载]
explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 虽然这篇文章我写的很长,但看起来真的不会困啊,真的都是干货啊!!!! 先解析 ...
- Codeforces 985 最短水桶分配 沙堆构造 贪心单调对列
A B /* Huyyt */ #include <bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define mkp(a, ...