Select二级联动+ajax动态获取数据

html代码

<div class="form-group">
                                        <label for="dtp_input2" class="col-md-3 control-label" style="padding-left: 0; padding-top: 5px; text-align: left">地区：</label>
                                        <select id="schoolarea" name="schoolarea" class="selectpicker" data-max-options="3" data-selected-text-format="count > 5">
                                            <option value='0'>河北</option>
                                            <option value='1'>北京</option>
                                            <option value='2'>天津</option>
                                            <option value='3'>上海</option>
                                            <option value='4'>广州</option>
                                            <option value='5'>深圳</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="dtp_input2" class="col-md-3 control-label" style="padding-left: 0; padding-top: 5px; text-align: left">市：</label>
                                        <div class="form-group input-group">
                                            <select name="class" id="class" multiple class="selectpicker" data-max-options="3" data-selected-text-format="count > 5">
                                                <option value="" selected="selected">请选择市</option>
                                            </select>
                                        </div>
                                    </div>
           

js代码：

<script>
        $("#schoolarea").on('change', function () {
            var schoolarea = $("#schoolarea option:selected").text();//获取选择地区
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "ashx/getdata.ashx?action=GetSpan&area=" + schoolarea + "",//通过一般处理程序提交
                success: function (result) {
                    removeAll();
                    if (result == "") {
                        $("#class").append("<option value=''>暂无市</option>");//为Select追加一个Option
                    }
                    else {
                        for (var i = 0; i < result.length; i++) {
                            $("#class").append("<option value='" + result[i].id + "'>" + result[i].name + "</option>");//为Select追加一个Option
                        }
                        $('#class').selectpicker('val', '');
                        $('#class').selectpicker('refresh');
                    }
                }
            });
        })
        $(".selectpicker").selectpicker({  
            noneSelectedText : '请选择地区'  
        });  
  
        $(window).on('load', function() {  
            $('.selectpicker').selectpicker('val', '');  
            $('.selectpicker').selectpicker('refresh');  
        });  
</script>
           

ajax程序

using System;
using System.Web;
using System.Data;
using System.Collections.Generic;
using System.Web.Script.Serialization;

public class getdata : IHttpHandler
{
    JavaScriptSerializer jsS = new JavaScriptSerializer();
    List<object> lists = new List<object>();
    string result = "";
    public void ProcessRequest(HttpContext context)
    {
        database db = new database("EnrollSystem");
        context.Response.ContentType = "text/plain";
        string action = context.Request["action"].ToString();
        string area = "";// context.Request["classid"].ToString();
        string sql = "";
        switch (action)
        {
            case "GetSpan":
                area = context.Request["area"].ToString();
                sql = "select [编号],[市] from [EnrollSystem].dbo.[市表] where 地区='" + area + "'";
                DataTable dt = db.GetDataTable(sql);
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    var obj = new { id = dt.Rows[i]["编号"], name = dt.Rows[i]["市"] };
                    lists.Add(obj);
                }
                jsS = new JavaScriptSerializer();
                result = jsS.Serialize(lists);
                context.Response.Write(result);
                break;
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}