使用jquery实现省市二级联动
技术分析
1.jquery页面加载事件$(function(){})。
2.还有绑定就是jquery的change()事件。
3.在获取用户选择的省份this.value,this代表当前操作的元素。
4.jquery追加内容函数
apend: A.append(B) 将B追加到A的内容的末尾处(二级联动使用的是该方法)
appendTo: A.appendTo(B) 将A加到B内容的末尾处
5.jquery删除内容函数
empty()代码演示 (标签里面所有的节点全部删除)
代码
Hello, Person and person
$(“p”).empty();
结果:
remove()代码演示 (标签以及标签中内容全部删除)
代码
Hello
how areyou?
$(“p”).remove();
结果:how are
6.jquery遍历
jquery中的遍历方式一(二级联动使用时该遍历方式)
代码演示
$.each( [0,1,2], function(i, n){
alert( “Item #” + i + ": " + n );
});
[0,1,2]这个位置是一个数组或者一个对象
i:是角标 从0开始
n:数组里面的内容 0 1 2
jquery中的遍历方式二
代码演示
该遍历方式是适用于jquery对象,jquery选择器获取到的是多个元素,就可以遍历了。
$(“img”).each(function(i){
this.src = “test” + i + “.jpg”;
});
代码步骤
1.首先导入jquery库,并书写页面加载事件。
2.创建一个二维数组里面存放的是省级市。
3.确定事件为onchange()事件,并编写该事件。
4.获取用户选择的是哪一个省份。
5.把用户选择的省份和数据组中的作比较(这里注意了比较的是角标)。
6.省份相同在遍历省份里面的省级市。
7.在获取第二个下拉框,在使用$("#city").append("<option>"+n+"</option>")添加到第二个下拉框中即可。
代码展示
<!DOCTYPE html>
<html>
<head>
<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 type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
//代码步骤
//1.首先导入jquery库,并书写页面加载事件。
//2.创建一个二维数组里面存放的是省级市。
//3.确定事件为onchange()事件,并编写该事件。
//4.获取用户选择的是哪一个省份。
//5.把用户选择的省份和数据组中的作比较(这里注意了比较的是角标)。
//6.省份相同在遍历省份里面的省级市。
//7.在获取第二个下拉框,在使用$("#city").append("<option>"+n+"</option>")添加到第二个下拉框中即可。
var provinecArr = new Array(3);
provinecArr[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
provinecArr[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
provinecArr[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
provinecArr[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$(function(){
$("#province").change(function(){
//清除之前选择的省份地级市
$("#city").empty();
//这里获取到的是用户选择的省份
var proVal = this.value;
//$.each( [0,1,2], function(i, n) [0,1,2]要遍历的数组。i是角标,n是数组中的每一个内容。
$.each(provinecArr, function(i, n){
//判断选择的省份,和数组中那个省份相同
if(i==proVal){
$.each(provinecArr[i],function(i,n){
$("#city").append("<option>"+n+"</option>")
});
}
});
});
});
</script>
</head>
<body>
<div>
<!--1.logo部分的div-->
<div>
<!--切分为3个小的div-->
<div class="top">
<img src="img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="img/header.png" height="47px"/>
</div>
<div class="top" style="padding-top: 15px;height: 35px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div id="clear">
</div>
<!--2.导航栏部分的div-->
<div id="menu">
<ul>
<li >首页</li>
<li >电脑办公</li>
<li >手机数码</li>
<li >孕婴保健</li>
<li >鞋靴箱包</li>
</ul>
</div>
<!--3.中间注册表单部分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"/><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="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>
<!--4.广告图片的div-->
<div id="">
<img src="img/footer.jpg" width="99%" />
</div>
<!--5.超链接与版权信息的div-->
<div id="bottom">
<a href="#">关于我们 </a>
<a href="#">联系我们 </a>
<a href="#">招贤纳士 </a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式 </a>
<a href="#">服务声明 </a>
<a href="#">广告声明 </a>
<p>Copyright © 2005-2016 传智商城 版权所有 </p>
</div>
</div>
</body>
</html>
页面效果展示
扫一扫
4963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
