Easyui实现乡镇村屯三级联动_联动精确到屯-CSDN博客

1、如果是类似下图所示单个combobox的情况：

首先

<td style="width:400px;">
                        选择村屯：
                        <select id="ddlDepartmentName" class="easyui-combobox" name="ddlDepartmentName" style="width:200px;height:22px;"></select>
                        <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="btnConfirm" value="Get" style="width:80px;height:22px;font-size:16px">确 认</a>
                        <asp:HiddenField ID="hddlDepartmentName" runat="server" />
                    </td>

 <script type="text/javascript">
        $(document).ready(function () {
            $("#ddlDepartmentName").combobox({
                url: "HandlerDepartment.ashx?Method=GetApplyDepartmentName",
                valueField: "PWDepartmentID",
                textField: "DepartmentName",
                onLoadSuccess: function (data) {
                    if (data == 0) {
                        $.messager.alert("系统提示", "数据加载异常，请联系管理员！", "warning");
                    }
                    else {
                        var data1 = $('#ddlDepartmentName').combobox('getData');
                        if (data1.length > 0) {
                            $("#ddlDepartmentName").combobox('setValue', data1[0].DepartmentName);//默认下拉第一个
                        }
                    }
                }
            });
            $("#btnConfirm").click(function () {
                var txt1 = $("#ddlDepartmentName").combobox("getValue");
                document.getElementById("hddlDepartmentName").value = txt1;
                
                var queryParams = $('#dg').datagrid('options').queryParams;
                queryParams.cddlDepartmentName = txt1;
                $('#dg').datagrid('options').queryParams = queryParams;
                $("#dg").datagrid('reload');
            });
        });
    </script>

在HandlerDepartment.ashx做处理：

 public void ProcessRequest(HttpContext context)
    {
        if (context.Request["Method"].ToString() == "GetDepartmentName")
        {
            //处理
        }
	}

2、三级联动实现：

首先：

<form id="ff" runat="server" method="post">
	    	<table cellpadding="5">
                <tr>
	    			<td>乡      镇:</td>
                </tr>
	    		<tr>
	    			<td><input class="easyui-combobox" id="dp1" name="dpname1" style="width:150px;" type="text" data-options="required:true"/></td>
	    		</tr>
                <tr>
	    			<td>村      名:</td>
                </tr>
                <tr>
	    			<td><input class="easyui-combobox" id="dp2" name="dpname2" style="width:150px;" type="text" data-options="required:true"/></td>
	    		</tr>
                <tr>
	    			<td>屯      名:</td>
                </tr>
                <tr>
	    			<td><input class="easyui-combobox" id="dp3" name="dpname3" style="width:150px;" type="text" data-options="required:true"/></td>
	    		</tr>
	    	</table>
	    </form>

<script type="text/javascript">
        $(document).ready(function () {
        // 一层
            var srmCombx = $("#dp1").combobox({
                url: "LinkDepartment.ashx?Method=getEquipmentByParId1",//&id=' + selectSgId
                valueField: "PWDepartmentID",
                textField: "DepartmentName",
                editable: false,
                onLoadSuccess: function (data) {
                    if (data == 0) {
                        $.messager.alert("系统提示", "乡镇信息加载异常，请联系管理员！", "warning");
                    }
                    else {
                        var data1 = $('#dp1').combobox('getData');
                        if (data1.length > 0) {
                            $("#dp1").combobox('setValue', '--请选择--');//默认下拉第一个
                        }
                    }
                },
               onSelect: function (record) {  //用户点击一级后自动二级combobox
                piperowCombx.combobox({
                    url: "LinkDepartment.ashx?Method=getEquipmentByParId2&id=" + $("#dp1").combobox("getValue"),
                    valueField: "PWDepartmentID",
                    textField: "DepartmentName",
                    editable: false,
                    onLoadSuccess: function (data) {
                        if (data == 0) {
                            $.messager.alert("系统提示", "村名信息加载异常，请联系管理员！", "warning");
                        }
                        else {
                            var data1 = $('#dp2').combobox('getData');
                            if (data1.length > 0) {
                                $("#dp2").combobox('setValue', '--请选择--');//默认下拉第一个
                            }
                        }
                        //pipeCombx.combobox("clear");
                        //pipeCombx.combobox('setValue', '全部');
                    },
                    onSelect: function (record) { //二级combobox被用户点击时触发三级combobox
                        pipeCombx.combobox({
                            url: "LinkDepartment.ashx?Method=getEquipmentByParId3&id=" + $("#dp2").combobox("getValue"),
                            valueField: "PWDepartmentID",
                            textField: "DepartmentName",
                            editable: false,
                            onLoadSuccess: function (data) {
                                if (data == 0) {
                                    $.messager.alert("系统提示", "屯名信息加载异常，请联系管理员！", "warning");
                                }
                                else {
                                    var data1 = $('#dp3').combobox('getData');
                                    if (data1.length > 0) {
                                        $("#dp3").combobox('setValue', '--请选择--');//默认下拉第一个
                                    }
                                }
                            }
                        });
                    }
                })
                pipeCombx.combobox("clear"); //清空二级下拉
            }
        });
        //  二层
            var piperowCombx = $("#dp2").combobox({
                url: "LinkDepartment.ashx?Method=getEquipmentByParId2&id=" + $("#dp1").combobox("getValue"),
                valueField: "PWDepartmentID",
                textField: "DepartmentName",
                editable: false,
                onLoadSuccess: function (data) {
                    if (data == 0) {
                        $.messager.alert("系统提示", "村名信息加载异常，请联系管理员！", "warning");
                    }
                    else {
                        var data1 = $('#dp2').combobox('getData');
                        if (data1.length > 0) {
                            $("#dp2").combobox('setValue', '--请选择--');//默认下拉第一个
                        }
                    }
                }
        });
        //三层
            var pipeCombx = $("#dp3").combobox({
                url: "LinkDepartment.ashx?Method=getEquipmentByParId3&id=" + $("#dp2").combobox("getValue"),
                valueField: "PWDepartmentID",
                textField: "DepartmentName",
                editable: false,
                onLoadSuccess: function (data) {
                    if (data == 0) {
                        $.messager.alert("系统提示", "屯名信息加载异常，请联系管理员！", "warning");
                    }
                    else {
                        var data1 = $('#dp3').combobox('getData');
                        if (data1.length > 0) {
                            $("#dp3").combobox('setValue', '--请选择--');//默认下拉第一个
                        }
                    }
                }
            });
        });
    </script>

之后再LinkDepartment.ashx：

if (context.Request["Method"].ToString() == "getEquipmentByParId1")
        {
		//获取乡镇
            List<PWDepartment> list = PWDepartmentLogic.GetVillageNameAll();

            JavaScriptSerializer Serializer = new JavaScriptSerializer();
            string JSONstr = Serializer.Serialize(list);
            context.Response.Write(JSONstr);
        }
        else if (context.Request["Method"].ToString() == "getEquipmentByParId2")
        {
            //获取村
        }
        else if (context.Request["Method"].ToString() == "getEquipmentByParId3")
        {
            //获取屯
        }

这样就可以实现乡镇村屯的三级联动选择，效果如下：

但是，有个问题一直存在，因为也不影响整体，我就一直没去解决：每次刚加载或者执行清除操作后，二级和三级下拉时一直是有数据的，如有需要，各位使用的童鞋可再做修改。网上扒的，粗浅勿喷，我的目的只是能够实现目前需要的功能，暂不深入研究。

3、此外，由于这个页面需要要链接到微信，可直接从微信操作，页面需要适应手机端

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

然后对css样式稍微改动，即可。