1. 程式人生 > >select2之級聯選單

select2之級聯選單

 第一個直接用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>