本文介绍了一个使用jQuery进行动态表单元素更新的例子。通过监听下拉菜单选择变化，动态填充另一个下拉菜单的内容。适用于希望了解jQuery事件绑定及DOM操作的前端开发者。
绑定事件：$("#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>
</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>
扫一扫
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
