java中二級聯動根據後臺list進行回顯

編程語言 Java JSON HTML java令狐沖 2017-04-07

這幾天在做項目時遇到這樣一個問題,前臺業務需求是前臺有個下拉框(數據從數據庫裡讀出來的),選中相應的下拉框選項,會出現相應的複選框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)

}

}

});

}

相關推薦

推薦中...