Cuatro cascadas de ciudades, condados y aldeas (realizadas por MINIUI)

一 、 前端 页面 实现
 <fieldset class = "layui-elem-field">
    <legend> 行政 区划 信息 </legend>
    <div class = "layui-field-box" id = "xzqhxx">
        <table style = "width : 99.5%; ">
            <tr class =" table_tr ">
                <td class =" table_td_label "align =" right "> 市 （省 管 县） </td>
                <td class =" table_td_input ">
                    <input id =" city ​​"name =" city "class =" mini-combobox "width =" 95% "textField =" name "valueField =" id "enabled =" false "showNullItem =" true "nullItemText =" 请 选择 "
                           onvaluechanged ="
                </td>
                <td class =" table_td_label "align =" right "> 县 （区） </td>
                <td class =" table_td_input ">
                    <input id = "county" name = "county" class = "mini-combobox" textField = "name" valueField = "id" width = "95%" showNullItem = "true" nullItemText = "请 选择" 
                           onvaluechanged = "onCountyChanged "/> 
                </td> 
                <td class =" table_td_label "align =" right "> 乡镇 （街道） </td> 
                <td class =" table_td_input "> 
                    <input id =" country "name =" country "class = "mini-combobox" textField = "name" valueField = "id" width = "95%" showNullItem = "true" nullItemText = "请 选择"
                           onvaluechanged = "onCountryChanged" /> 
                    <span class = "red_star"> * </span> 
                </td> 
                <td class = "table_td_label" align = "right"> 村 （社区） </td>
                <td class = "table_td_input"> 
                    <input id = "village" name = "village" class = "mini-combobox" textField = "name" valueField = "id" width = "95%" showNullItem = "true" nullItemText = "请 选择" 
                           onvaluechanged = "onVillageChanged" required = "true" /> 
                    <span class = "red_star"> * </span> 
                </td> 
            </tr> 
            <tr> 
                <td class = "table_td_label" align = " derecha "> 组 </td> 
                <td class =" table_td_input "> 
                    <input id =" group "name = "group" class = "mini-combobox" textField = "name" showNullItem = "true" nullItemText = "请 选择" 
                           valueField = "id" width = "95%" /> 
                </td>
datos, citybm);         city.select (index);


















        var id = city.getValue (); 
        onCityChanged (id); 
    }); 
    // 选中 市
    función onCityChanged (e) { 
        if ("1" == sgxflag) { 
            var id = city.getValue (); 
            county.setValue (""); 
            url = "$ {basePath} / jmggyw / common / querySxxc? id =" + id; 
            county.setUrl (url); 
            if (countybm == "" || countybm == nulo) { 
                county.select (0); 
            } else { 
                var index = getMapSubscript (county.data, countybm); 
                condado.seleccionar (índice); 
                mini.get ("condado"). setEnabled (falso); 
            } 
            var id = county.getValue ();
            onCountyChanged (id); 
        } else { 
            var id = city.getValue (); 
            country.setValue (""); 
            url = "$ {basePath} / jmggyw / common / querySxxc? id =" + id; 
            country.setUrl (url); 
            if (countybm == "" || countybm == nulo) { 
                country.select (0); 
            } else { 
                var index = getMapSubscript (country.data, countrybm); 
                country.select (index); 
                mini.get ("condado"). setEnabled (falso); 
            } 
            var id = country.getValue (); 
            onCountryChanged_sgx (id); 
        } 
        if (sbjandqx == "1") { // 省 管 县 比 正常 的 少 一级
            url = "$ {basePath} / jmggyw / common / querySbjandQx? id =" + id; 
            county.setValue (""); 
            county.setUrl (url); 
            county.setEnabled (verdadero); 
        } 
    }; 

    // 乡
    function onCountryChanged_sgx (e) { 
        debugger; 
        var id = country.getValue (); 
        var texto = country.getText (); 
        village.setValue (""); 
        url = "$ {basePath} / jmggyw / common / querySxxc? id =" + id; 
        village.setUrl (url); 
        if (villagebm == "" || villagebm == nulo) { 
            if ("大 中专 院校" == texto) { 
                village.select (1); 
            } else { 
                pueblo. seleccione (0); 
            }
        } else { 
            var index = getMapSubscript (village.data, villagebm); 
            village.select (index); 
            village.setEnabled (falso); 
        } 
        var id = village.getValue (); 
        onVillageChanged (id); 
    }; 

    // 选中 县
    función onCountyChanged (e) { 
        var id = county.getValue (); 
        country.setValue (""); 
        url = "$ {basePath} / jmggyw / common / querySxxc? id =" + id; 
        country.setUrl (url); 
        if (countrybm == "" || countrybm == null) { 
            country.select (0); 
        } else { 
            var index = getMapSubscript (country.data, countrybm); 
            country.select (index);
            mini.get ("country"). setEnabled (false); 
        } 
        var id = country.getValue (); 
        onCountryChanged (id); 
    }; 

    // 乡
    function onCountryChanged (e) { 
        var id = country.getValue (); 
        village.setValue (""); 
        url = "$ {basePath} / jmggyw / common / querySxxc? id =" + id; 
        village.setUrl (url); 
        if (villagebm == "" || villagebm == null) { 
            village.select (0); 
        } else { 
            var index = getMapSubscript (village.data, villagebm); 
            village.select (index); 
            mini.get ("aldea"). setEnabled (falso); 
        } 
        var id = aldea.
        onVillageChanged (id); 
    }; 

    // 
    Función de pueblo onVillageChanged (e) { 
        var id = village.getValue (); 
        group.setValue (""); 
        url = "$ {basePath} / jmggyw / common / querySxxc? id =" + id; 
        group.setUrl (url); 
        group.select (0); 
    }; 
    // Obtener la 
    función de subíndice getMapSubscript (map, value) { 
       // Obtener el 
        índice de subíndice = 0; 
        para (var i = 0; i <map.length; i ++) { 
           if (value == (map [i]). id) { 
              index = i; 
           } 
        } 
        return index; 
    }; 

Segundo, adquisición de datos de fondo (colocado en MAP para extracción)

/ ** 
* Obtener el código de división administrativa subordinada 
* @param 
* @return 
* / 
public List <Map <String, Object >> querySxxc (String id) { 
    StringBuffer sql = new StringBuffer (); 
    sql.append ("select AAB301 id, 
    --Código de división administrativa \ n "); sql.append (" Nombre AAE044 --Nombre \ n "); 
    sql.append (" from AB51 \ n "); 
    sql.append (" donde BAE024 =? Ordenar por AAB301 \ n "); 
    devuelve DBUtils.query (sql.toString (), id); 
} 

Observaciones:

<input id = "group" name = "group" class = "mini-combobox" textField = "name" showNullItem = "true" nullItemText = "Seleccione" 
                           valueField = "id" width = "95%" /> 
el menú desplegable Se realiza a través de mini-combobox, que tiene desventajas y ventajas. La desventaja es que no puede realizar predicciones. La ventaja es que si la ID es diferente y el nombre es el mismo, seleccione el nombre para obtener la identificación

Hay desventajas y ventajas de mini-comselect para lograr, las ventajas pueden realizar la consulta de asociación, la desventaja es que si la ID es diferente, el nombre es el mismo, el primer valor de ID siempre se obtiene cuando se selecciona el mismo nombre