1. 程式人生 > >用select2做級聯下拉選擇

用select2做級聯下拉選擇

                                        兩個下拉框,通過選擇年級下拉框進行查詢該年級下的所有班級。

這裡寫圖片描述

可以對select新增onchage事件,監控下拉事件,下拉選擇年級,把年級id傳入後臺查詢出該年級下屬班級,把班級列表展示到下拉框。
js:

$("#grade").change(function () {
    var grade= $("#grade").val();
    $.ajax({
        url:base + "/user/grade/list",
        dataType: "JSON",
        data: {'gradeId'
: grade}, type: "GET", success:function (data) { var gradeNum= data.length; var option = "<option value=''>請選擇年級</option>"; if(gradeNum>0){ $("#labId").html(option); for(var i = 0;i<gradeNum;i++){ option += "<option value='"
+data[i].id+"'>"+data[i].name+"</option>"; } } $("#class").html(option); $("#class").val(Id); //編輯時繫結 $("#class").select2({ minimumResultsForSearch: -1 });//載入樣式 }, error:function(e) { layer.alert("系統異常,請稍候重試!"
); } }); });