动态生成多选下拉框
在使用easyui的过程共中难免会遇到需要动态生成下拉框,也许是多个下拉框,也许是一个下拉框,说难不难,说简单不简单,反正我没有弄出来之前,觉得挺麻烦的.
下面附上代码,可用for循环动态生成多个下拉框!!! 有需求,评论联系我!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 引用easyUi的配置文件 -->
<link rel="stylesheet" type="text/css" href="${path}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${path}/easyui/themes/icon.css">
<script type="text/javascript" src="${path}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${path}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${path}/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!-- 动态生成的下拉框存放位置 -->
<div id="dynhtml">
</div>
<!-- 通过标签生成多选下拉框 -->
<input id='deType' class='easyui-combobox' name='language' url='findByTypeId.action?typeId=1' valueField='id' textField='name' multiple='true' panelHeight='auto'>
<script type="text/javascript">
//通过js代码生成
$(function(){
var dyn = "<input id='cc' name='dept' value='aa'>"; //单选下拉框
//多选下拉框
dyn += "<input id='ddd' class='easyui-combobox' name='language' valueField='id' textField='name' multiple='true' panelHeight='auto' editable='false' />";
$("#dynhtml").html(dyn);
//设置单选下拉框的访问数据的地址
$('#cc').combobox({
url:'findByTypeId.action',
valueField:'id',
textField:'name'
});
//设置多选下拉框的访问数据的地址
$('#ddd').combobox({
url:'findByTypeId.action?typeId=2'
});
});
//设置多选下拉框的访问数据的地址
$("#deType").combobox({
//对于用for循环生成的复选框 下面代码同样适用,
//选择事件
onSelect: function(record){ //record 选择的下拉框的数据 包含为显示的数据
//获取选择的下拉框的所有值
var values = $(this).combobox('getValues');
//获取选中的下拉框的id属性
var typeId = $(this).attr("id");
//获取选中的下拉框的name属性
var typeName = $(this).attr('textboxname');
//设置只能选择两个
if(values.length > 2){
//设置刚选择的属性取消选中
$('#deType').combobox('unselect', record.id);
}
}
});
</script>
</body>
</html>