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>

猜你喜欢