combobox级联检索下拉选择框

1、效果图

2、前端

@{

    ViewBag.Title = "Index";

    Layout = null;

    @*自动筛选下拉框*@

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

    <script src="~/Content/EasyUI/jquery.easyui.min.js"></script>

}

<table style="width:40%; margin:auto;" class="mys-table2">

    <tr>

        <td colspan="3" style="text-align:center;">

            检索的级联形式（好用）

        </td>

    </tr>

    <tr>

        <td>

            <input id="sheng" class="easyui-combobox" style="width:100px"

                   data-options="{

                    url:'/Home/GetProvince',

                    method:'get',

                    valueField:'id',

                    textField:'text',

                    onSelect:function(region){

                        $('#shi').combobox('clear'); //清除原有项目

                        $('#quxian').combobox('clear'); //清除原有项目

                        $('#shi').combobox('reload','/Home/GetCity?parentid='+region.id);

                        $('#quxian').combobox('reload','/Home/GetCounty');//清理原有显示内容

                    }}">

        </td>

        <td>

            <input id="shi" class="easyui-combobox" style="width:100px"

                   data-options="{

                            url:'/Home/GetCity',

                            valueField:'id',

                            textField:'text',

                            onSelect:function(region){

                                $('#quxian').combobox('clear'); //清除原有项目

                                $('#quxian').combobox('reload','/Home/GetCounty?parentid='+region.id);

                            }

                       }">

        </td>

        <td>

            <input id="quxian" class="easyui-combobox" style="width:100px"

                   data-options="{

                            url:'/Home/GetCounty',

                            valueField:'id',

                            textField:'text'

                        }">

        </td>

    </tr>

</table>

3、后台（手动写的数据源，到时候可以换成自己的）

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace SelectDemo.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        /// <summary>

        /// 获取省份

        /// </summary>

        /// <returns></returns>

        public string GetProvince()

        {

            string json = "[{\"id\":1,\"text\":\"山东\"},{\"id\":2,\"text\":\"山西\"},{\"id\":3,\"text\":\"河北\"},{\"id\":4,\"text\":\"河南\"},{\"id\":5,\"text\":\"江苏\"}]";

            return json;

        }

        /// <summary>

        /// 获取城市

        /// </summary>

        /// <param name="parentid"></param>

        /// <returns></returns>

        public string GetCity(string parentid)

        {

            string json = "[]";

            if (parentid == "") //山东

                json = "[{\"id\":1,\"text\":\"青岛\"},{\"id\":2,\"text\":\"菏泽\"},{\"id\":3,\"text\":\"济南\"},{\"id\":4,\"text\":\"潍坊\"},{\"id\":5,\"text\":\"济宁\"}]";

            if (parentid == "") //山西

                json = "[{\"id\":6,\"text\":\"太原\"},{\"id\":7,\"text\":\"大同\"}]";

            if (parentid == "") //河北

                json = "[{\"id\":8,\"text\":\"石家庄\"},{\"id\":9,\"text\":\"秦皇岛\"}]";

            if (parentid == "") //河南

                json = "[{\"id\":10,\"text\":\"郑州\"},{\"id\":11,\"text\":\"驻马店\"}]";

            if (parentid == "") //江苏

                json = "[{\"id\":12,\"text\":\"南京\"},{\"id\":13,\"text\":\"苏州\"}]";

            return json;

        }

        /// <summary>

        /// 获取区县

        /// </summary>

        /// <param name="parentid"></param>

        /// <returns></returns>

        public string GetCounty(string parentid)

        {

            string json = "[]";

            if (parentid == "") //青岛

                json = "[{\"id\":1,\"text\":\"市南区\"},{\"id\":2,\"text\":\"市北区\"},{\"id\":3,\"text\":\"崂山区\"},{\"id\":4,\"text\":\"四方区\"},{\"id\":5,\"text\":\"李沧区\"}]";

            if (parentid == "") //菏泽

                json = "[{\"id\":6,\"text\":\"巨野县\"},{\"id\":7,\"text\":\"郓城县\"}]";

            if (parentid == "") //济南

                json = "[{\"id\":8,\"text\":\"历城区\"},{\"id\":9,\"text\":\"长清区\"}]";

            if (parentid == "") //潍坊

                json = "[{\"id\":10,\"text\":\"潍城区\"},{\"id\":11,\"text\":\"高密市\"}]";

            if (parentid == "") //济宁

                json = "[{\"id\":12,\"text\":\"微山县\"},{\"id\":13,\"text\":\"嘉祥县\"}]";

            if (parentid == "") //太原

                json = "[{\"id\":14,\"text\":\"迎泽区\"},{\"id\":15,\"text\":\"晋源区\"}]";

            if (parentid == "") //大同

                json = "[{\"id\":16,\"text\":\"平城区\"},{\"id\":17,\"text\":\"云冈区\"}]";

            if (parentid == "") //石家庄

                json = "[{\"id\":18,\"text\":\"新华区\"},{\"id\":19,\"text\":\"辛集市\"}]";

            return json;

        }

        public ActionResult Index()

        {

            return View();

        }

    }

}

4、DEMO（另：demo附上不定行生成多个级联检索下拉选择框）

　　SelectDemo

作者：小路 QQ：2490024434 
出处：http://www.cnblogs.com/lengzhan/
本文版权归【冷战】和博客园所有，欢迎转载收藏，未经作者同意须保留此段声明，否则保留追究法律责任的权利。