動態生成多選下拉框
在使用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>