這幾天在做項目時遇到這樣一個問題,前臺業務需求是前臺有個下拉框(數據從數據庫裡讀出來的),選中相應的下拉框選項,會出現相應的複選框checkbox(也是從數據庫裡讀出來的)讓客戶進行選擇,這個不是很難,我就不講了(如果這個不知道怎麼做的話可以私聊我),難就難在再點進這個頁面時要回顯出剛才選擇的下拉框值,且複選框勾選的也要顯示出來,廢話不多說直接上代碼:
<div class="controls">
<select class="input-xlarge " onchange="changeLac(this.value)" class="required" >
<option value="" label="" />
<c:forEach items="${page.list}" var="ss">
<c:choose>
<c:when test="${officename==ss.name }">//當相等時
<option value="${ss.id }" selected="selected">${ss.name}</option>//selected="selected"下拉框被選中
</c:when>
<c:otherwise>
<option value="${ss.id }" >${ss.name}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
<br/>
<div id="ci"></div>//複選框顯示的地方
</div>
下面重點來了,主要是js裡面怎麼處理後臺傳來的list讓複選框選中:
function changeLac(v) {
jQuery('#ci').html("");
var ciValue = jQuery('#ci');
var arry=new Array();
<c:forEach items="${newlist }" var="item">
arry.push("${item}");
</c:forEach>//這塊是個重點:因為newlist是後臺傳來的list集合,而js中只能循環遍歷數組類型,所以先new Array()來保存list中的元素;//
//異步請求查詢複選框列表的方法並返回json數組
$.ajax({
type: 'post',
url : '${ctx}/bus/member/hytj?idd='+v,
dataType : 'json',
//cache:false,
success : function (opts) {
if (opts && opts.length > 0) {
var html = [];
var str = "";
for (var i = 0; i < opts.length; i++) {
var checked="";
for(var k=0;k<arry.length;k++){
if(opts[i].id==arry[k]){//當相等時給複選框賦予一個checked="checked='checked'"
checked="checked='checked'"
}
}
str+="<input type='checkbox' name='asdf' value='"+(opts[i]).id+"' "+checked+">"+(opts[i]).name+"("+(opts[i]).userRole+")";//這塊也是個重點,拼接的時候注意雙引號,單引號和+
}
$("#ci").html(str)
}
}
});
}