1. 程式人生 > >Jeesite下拉框的二級聯動

Jeesite下拉框的二級聯動

話不多說 首先上圖片
這裡寫圖片描述
JSP 頁面程式碼 截圖

第一個下拉框JSP程式碼

        <div class="control-group">
            <label class="control-label">離職型別:</label>
            <div class="controls">
                <form:select id="type" name="type" path="type" class="input-xlarge" onchange="findtemplate(this.options[this.options.selectedIndex].value);"
style="width:180px;">
<%-- <form:option value="" label="" /> --%> <form:options items="${fns:getDictList('upl_type')}" itemLabel="label" itemValue="value" htmlEscape="false" /> </form:select
>
</div> </div>

第二個下拉框JSP程式碼

        <div class="control-group">
            <label class="control-label">選擇模板:</label>
            <div class="controls">
                <form:select id="template" name="template" path="type" class="input-xlarge"
style="width:180px;">
<%-- <form:option value="" label="" /> --%> <form:options id="wordTemplate" items="${fns:getDictList('upc_word')}" itemLabel="label" itemValue="value" htmlEscape="false" /> </form:select> <%-- <a href="${ctx}/sys/userdetail/upcform">匯出模板</a> --%> </div> </div>

精髓部分為 第一個下拉框

onchange="findtemplate(this.options[this.options.selectedIndex].value);"

說明:findtemplate()為函式名稱
this.options[this.options.selectedIndex].value 這句話能獲取到第一個下拉框選擇的值

JS程式碼部分:

function findtemplate(v) {
    $.ajax({
        type : "post",
        async : false,
        url : "getPostTemplateJson",
        data : {
            'type' : v
        },
        dataType : "json",
        success : function(msg) {
            $("#template").empty();
            //$("#template").select2();
            if (msg.length > 0) {
                for (var i = 0; i < msg.length; i++) {
                        var partId = msg[i].value;
                        var partName = msg[i].label;
                        var $option = $("<option>").attr({
                            "value" : partId
                        }).text(partName);
                        $("#template").append($option);
                }
                //$("#template option:first").prop("selected", 'selected');
                $("#template").change();

            }
        },
        error : function(json) {
            $.jBox.alert("網路異常!");
        }
    });
}

JS程式碼說明:
通過AJAX請求 後臺資料 然後採取迴圈拼接的辦法 構造下拉框的。 option。。
必要說明:$(“#下拉框”).empty(),為 jquey寫法,必寫。

$(“#下拉框”).change(); 這個change()函式 一定要寫,否則有一個小bug。
這個bug是什麼就不明說了,複製程式碼的兄弟 可以去掉試試效果。

這是個很細節的操作哦 。。。。。。。。。。。。。。