Un pequeño menú relacionado con la provincia y municipal tardó mucho tiempo en explorar. La razón es que no es hábil en jQuery. Dado que ha funcionado tan duro para completar un componente, naturalmente quiere compartirlo para quienes necesitan usarlo.
Esta es solo una versión básica, y debe optimizarse más adelante.
Código: Dirección de descarga del menú provincial y municipal relacionada con
ilustrar:
Ya no hablaré sobre la declaración SQL, contiene dos archivos "City.SQL" y "Provincial.sql".
1. Hablemos de obtener datos primero
public void initProcitys () {logger.info ("obtener la región"); Lista <vincials> provincias = provincias.me.getProvincials (); para (provinciales provinciales: provincias) {list <citys> ciudades = ciudads.me.getcitysbyprovincialid (provincial.getlong ("id")); Provincial.put ("Ciudades", Jsonkit.tojson (Ciudades)); } setattr ("provinciales", provincias); render ("procity.jsp");}1). Obtenga todos los menús provinciales primero.
2). Obtenga el menú municipal correspondiente de acuerdo con la identificación provincial.
3). Al obtener menús municipales, tenga en cuenta que la lista se convierte en datos JSON, y Jackjson se usa aquí.
2. Habla sobre el diseño de la página
<select name = "Province_code" id = "province_select"> <c: foreach elementos = "$ {provincials}" var = "item"> <opción valor = "$ {item.procode}" cdata = '$ {item.citys}'> $ {item.em.proname} </option> </c: foreach> </select <select name names} '> $ {item.poname} </pption> </c: foreach> </select> <select name = "city" city " id = "city_select"> </elect>1). Se utilizaron dos selecciones, y todavía no se agregaron estilos
2). Use Foreach para inicializar primero el menú provincial y, al mismo tiempo, vincule sus datos de la ciudad al atributo CDATA.
3. Cuéntame sobre la implementación de JS
$ (function () {provincialChange (); var $ provincial = $ ("#province_select"); $ provincial.change (provincialChange);}); function provincialChange () {var $ provincial = $ ("#province_select"); // El valor del código que se muestra en el nivel provincial var provincial_code = $ provincial.val (); var $ selectionOption = $ ('#Province_Select opción [valor =' + provincial_code + ']'); var city_data = yunm.jSoneval ($ selectedOption.attr ("cdata")); // Lista de menú municipal $ city_select = $ ("#city_select"); $ city_select.empty (); for (var i = 0; i <city_data.length; i ++) {var code = city_data [i] .code; var cname = city_data [i] .cname; $ city_select.append ("<opción valor = '"+código+"'>"+cname+"</opción>"); }}1). Cuando la carga de la inicialización de la página y el cambio de menú provincial, los menús municipales deben cargarse
2). Primero obtenga el menú provincial, obtenga el valor actual y luego obtenga la opción de acuerdo con el valor
3). Obtenga datos municipales de la opción y preste atención a Usar EVEV para convertir los datos. La razón específica puede ser que sea principalmente para agregar ().
4.) Reunir el menú municipal y la pantalla de salida
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo, y espero que sea útil para todos aprender la programación de bootstrap.