jquery事件绑定和激活
2016-10-12 16:24
246 查看
1.先看效果图,图上有说明
2.源代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>事件绑定和激活</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body {
font-family: "Microsoft YaHei";
text-align: center;
}
#mainDiv {
width: 100%;
text-align: center;
margin-top: 10px;
}
</style>
<script type="text/javascript">
var cityOfChn = [ "北京", "上海", "广州", "深圳" ];//中国城市
var cityOfUsa = [ "华盛顿特区", "纽约", "洛杉矶", "芝加哥" ];//美国城市
$(document).ready(function() {
/* 在国家下拉列表上绑定改变事件 */
$("#country").bind("change", function() {
var countryName = $(this).val();
var cities;
if (countryName == '中国') {
cities = $(cityOfChn);
} else if (countryName == '美国') {
cities = $(cityOfUsa);
}
initCities(cities);
});
/* 初始化城市方法 */
function initCities(cities) {
$("#city").empty();
$(cities).each(function() {
$("#city").append("<option>" + this + "</option>");
});
}
/* 按钮btn1点击事件:先修改国家下拉列表默认值,然后激活城市下拉列表改变事件 */
$("#btn1").click(function() {
$("#country").val(["中国"]).change();//重点:先修改城市值,再激发城市改变事件
$("#city option:eq(2)").prop("selected","true");
});
/* 按钮btn2点击事件:先修改国家下拉列表默认值,然后激活城市下拉列表改变事件 */
$("#btn2").click(function() {
$("#country").val(["美国"]).change();
$("#city option:eq(1)").prop("selected","true");
});
});
</script>
</head>
<body>
<div id="mainDiv">
<p>【中国:北京、上海、广州、深圳】,【美国:华盛顿特区、纽约、芝加哥、洛杉矶】</p>
<br> <span>国家:</span> <select id="country">
<option>请选择...</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
</select> <span> 城市列表:</span> <select id="city">
</select>
</div>
<br>
<br>
<hr>
<input type="button" id="btn1" value="选择城市为:广州">
<input type="button" id="btn2" value="选择城市为:纽约">
</body>
</html>
2.源代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>事件绑定和激活</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body {
font-family: "Microsoft YaHei";
text-align: center;
}
#mainDiv {
width: 100%;
text-align: center;
margin-top: 10px;
}
</style>
<script type="text/javascript">
var cityOfChn = [ "北京", "上海", "广州", "深圳" ];//中国城市
var cityOfUsa = [ "华盛顿特区", "纽约", "洛杉矶", "芝加哥" ];//美国城市
$(document).ready(function() {
/* 在国家下拉列表上绑定改变事件 */
$("#country").bind("change", function() {
var countryName = $(this).val();
var cities;
if (countryName == '中国') {
cities = $(cityOfChn);
} else if (countryName == '美国') {
cities = $(cityOfUsa);
}
initCities(cities);
});
/* 初始化城市方法 */
function initCities(cities) {
$("#city").empty();
$(cities).each(function() {
$("#city").append("<option>" + this + "</option>");
});
}
/* 按钮btn1点击事件:先修改国家下拉列表默认值,然后激活城市下拉列表改变事件 */
$("#btn1").click(function() {
$("#country").val(["中国"]).change();//重点:先修改城市值,再激发城市改变事件
$("#city option:eq(2)").prop("selected","true");
});
/* 按钮btn2点击事件:先修改国家下拉列表默认值,然后激活城市下拉列表改变事件 */
$("#btn2").click(function() {
$("#country").val(["美国"]).change();
$("#city option:eq(1)").prop("selected","true");
});
});
</script>
</head>
<body>
<div id="mainDiv">
<p>【中国:北京、上海、广州、深圳】,【美国:华盛顿特区、纽约、芝加哥、洛杉矶】</p>
<br> <span>国家:</span> <select id="country">
<option>请选择...</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
</select> <span> 城市列表:</span> <select id="city">
</select>
</div>
<br>
<br>
<hr>
<input type="button" id="btn1" value="选择城市为:广州">
<input type="button" id="btn2" value="选择城市为:纽约">
</body>
</html>
相关文章推荐
- jquery 新增元素需要重新绑定事件(list 加载 进行重新绑定)
- 用jquery给元素绑定事件,一些内部细节
- jQuery的on与bind绑定事件的区别与注意事项
- jQuery的事件绑定命名空间
- jQuery事件绑定.on()简要概述及应用
- JQuery中的事件 (二.事件绑定)
- jQuery 判断元素上是否绑定了事件
- jQuery 事件绑定(新版本)
- jQuery 循环 绑定事件 问题记录
- jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别
- jquery 等html加载完成再绑定事件
- $("#XXX").click()和$("#YYY").on("click","指定的元素",function(){});的区别(jQuery动态绑定事件)
- jQuery事件绑定.on()简要概述及应用
- 关于jquery 的绑定事件on 如何绑定动态生成的dom元素
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
- jquery多个标签绑定同一个事件
- jQuery 特殊事件绑定
- jquery绑定事件
- jQuery给动态添加的元素绑定事件
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on