select2之級聯選單
阿新 • • 發佈:2019-01-23
第一個直接用foreach和${}填充,
第二個在ajax的回撥裡,給<select id="siteInfo">動態新增查詢出來的值到option
$.each(data.object, function (i, item) { //jquery遍歷處理list i是list中物件的腳標(從0開始) 加上option了 $("#siteInfo").append(" <option value='" + item.siteid + "'>" + item.sitename + "</option>"); });
在引入了jquery的專案執行如下程式碼即可看效果
$.each([2,3,4],function(index,value){alert('第'+ index+ '數是'+value);});
引入select2的js和cs
<script type="text/javascript" src="js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/select2.min.css"/>
$(function () { $('.js-example-basic-single').select2(); //這裡即便沒有onchange事件,也要將2下拉框展示 getCustomer(); loadMyTable(null); getSites(); //注意這裡將場所的第一個選中哦 });
function getCustomer() { // $("#siteInfo").html();//清空原來的值 var cusId = $("#cusInfo").val().toString(); $("#siteInfo").empty(); // $("#siteInfo").append('<option value="">請選擇</option>');//第二個框沒有請選擇了(即第一個預設被選中) $.ajax({ type: "GET", contentType: 'application/json; charset=UTF-8', dataType: "json", url: "mallMapMgrSite300", data: { siteid: cusId }, async: true, success: function (data) { //data.object返回的list,item就是list的每一個物件 if (true) { $.each(data.object, function (i, item) { //加上option了 $("#siteInfo").append(" <option value='" + item.siteid + "'>" + item.sitename + "</option>"); }); } ; getSites(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log("no"); } });
<div style="float: left;margin-right: 25px">
<div class="div_2_1_right">
<label>客戶名稱:</label>
</div>
<div class="div_2_1_left">
<select id="cusInfo" class="js-example-basic-single" onchange="getCustomer()" name="cusInfo"
style="width:250px">
<%--<option value="">請選擇</option>--%>
<c:forEach var="li" items="${listCustomer}">
<option style="width:200px" value="${li.siteid}">${li.sitename}</option>
</c:forEach>
</select>
</div>
</div>
<div style="float: left;">
<div class="div_2_1_right">
<label>場所名稱:</label>
</div>
<div class="div_2_1_left">
<select id="siteInfo" name="siteInfo" class="js-example-basic-single" onchange="getSites()"
style="width:250px;">
<%--<option value="">請選擇</option>--%>
</select>
</div>
</div>