首页 > Web开发 > 详细

jQuery动态绑定事件（简单模拟二级联动效果）

时间：2015-06-15 18:53:15 阅读：166 评论：0 收藏：0 [点我收藏+]

标签：jquery动态绑定事件简单模拟二级联动

绑定事件：$("#leyangjun").bind("change",function(){

jquery 给标签赋值：$(‘#leyangjun‘).text(‘好一朵美丽的茉莉花’);

清空表单值：$("#leyangjun").empty();

radio取值：$("input[name=‘radioName‘][checked]").val();

<!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=utf-8" />

<title>jQuery绑定事件，动态增加标签--乐杨俊</title>

<script src=‘../../js/jquery.ui/jquery-ui.min.js‘></script>
</head>
<body style="padding:0px 0px;" >

<div id="edit" style="display: none">
<b>所属人群：</b>
<select name=‘belongs_crowd‘ id=‘belongs_crowd‘>
<option value=‘0‘ selected="selected">-请选择-</option>
<option value=‘1‘>上班族</option>
<option value=‘2‘>大学生</option>
<option value=‘3‘>中学生</option>
<option value=‘4‘>小学生</option>
<option value=‘5‘>高中生</option>
<option value=‘6‘>初中生</option>
<option value=‘7‘>幼儿</option>
<option value=‘100‘>其他</option>
</select>
<b>学习目的：</b>
<span id="learning_purpose">
<select name=‘learning_purpose‘ id=‘learning_purposes‘></select>
</span>
</div>

<script>
$("#belongs_crowd").bind("change",function(){
if($(this).val()==0){
$(‘#learning_purposes‘).empty();
return;
}
else if($(this).val()==1){
$(‘#learning_purposes‘).empty();
$(‘#learning_purposes‘).append(" <option value=‘7‘>综合英语能力</option> <option value=‘8‘>商务职场</option> <option value=‘9‘>在职面试</option> <option value=‘10‘>雅思托福</option> <option value=‘11‘>出国旅行</option>");
}
else if($(this).val()==2){
$(‘#learning_purposes‘).empty();
$(‘#learning_purposes‘).append(" <option value=‘10‘>雅思托福</option> <option value=‘7‘>综合英语能力</option> <option value=‘12‘>毕业生找工作</option> <option value=‘8‘>商务职场</option> <option value=‘11‘>出国旅行</option>");
}
else if($(this).val()==3){
$(‘#learning_purposes‘).empty();
return;
}
});
</script>

</body>
</html>

jQuery动态绑定事件（简单模拟二级联动效果）

标签：jquery动态绑定事件简单模拟二级联动

原文地址：http://blog.csdn.net/leyangjun/article/details/46505159

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！