jQuery动态生成下拉列表并添加点击事件
直接上代码了，后续会贴上效果图。
<!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>
<title></title>
</head>
<body>
<ul id="list">
</ul>
<div class="form-group">
<button id="L1" class="col-sm-2">部门</button>
<div class="col-sm-8">
<select name="deptId" id="deptId" class="form-control">
<option value="">请选择部门</option>
</select>
</div>
</div>
<input type="text" name="phone" id="phone" />
<script type="text/javascript" src="/static/static/js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: '/member/list',
type: 'POST',
data: {},
dataType: 'json',
timeout: 1000,
cache: false,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
});
function LoadFunction() {
$("#list").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#list").html('');
//eval将字符串转成对象数组
var json = eval(tt); //数组
var deptId = $('#deptId');
$.each(json,function(index,item){
htmlStr = '';
htmlStr += '<option value="' + item.username + '">' + item.id + '</option>';
deptId.append(htmlStr);
});
}
$("#deptId").change(function(){
alert($(this).children('option:selected').val());
});
});
</script>
</body>
</html>