Um pequeno cardápio provincial e municipal levou muito tempo para explorar. A razão é que não é hábil no jQuery. Como trabalhou tanto para concluir um componente, naturalmente deseja compartilhá -lo para aqueles que precisam usá -lo.
Esta é apenas uma versão básica e precisa ser otimizada posteriormente.
Código: Endereço de download de menu provincial e municipal
ilustrar:
Não vou falar mais sobre a instrução SQL, ele contém dois arquivos "City.SQL" e "Provincial.SQL".
1. Vamos falar sobre obter dados primeiro
public void initprocitys () {Logger.info ("Get the Region"); Lista <Sune Provinces> Províncias = Províncias.me.getProvivincials (); para (provinciais provinciais: províncias) {list <citys> cities = citys.me.getCitysbyprovivinceId (provincial.getlong ("id")); provincial.put ("Citys", jsonkit.tojson (cidades)); } setattr ("provinciais", províncias); render ("procity.jsp");}1). Obtenha todos os menus provinciais primeiro.
2). Obtenha o menu municipal correspondente de acordo com o ID da província.
3). Ao obter menus municipais, observe que a lista é convertida em dados JSON e Jackjson é usado aqui.
2. Fale sobre o layout da página
<select name = "Província_code" id = "Província_select"> <c: foreach itens = "$ {provinciais}" var = "item"> <opção value = "$ {item.procode}" cdata = '$ {item.citys}'> $ {item.Proname} </" id = "city_select"> </leclect>1). Duas seleções foram usadas e nenhum estilo foi adicionado ainda
2). Use a Forach para inicializar primeiro o menu provincial e, ao mesmo tempo, vincule seus dados da cidade ao atributo CDATA.
3. Conte -me sobre a implementação do JS
$ (function () {ProvincialChange (); var $ provincial = $ ("#Province_Select"); $ provincial.change (ProvincialChange);}); function ProvincialChange () {var $ provincial = $ ("#Proverince_select"); // o valor do código exibido no nível provincial var provincial_code = $ provincial.val (); var $ selectedOption = $ ('#Province_Select Option [Value =' + Provincial_code + ']'); var city_data = yunm.jsoneval ($ selectedOption.attr ("cdata")); // Lista de menus municipais $ 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 ("<opção value = '"+code+"'>"+cname+"</option>"); }}1). Quando o carregamento da inicialização da página e a comutação de menu provincial, os menus municipais precisam ser carregados
2). Primeiro obtenha o menu provincial, obtenha o valor atual e depois obtenha a opção de acordo com o valor
3). Obtenha dados municipais da opção e preste atenção ao uso da avaliação para converter os dados. O motivo específico pode ser que é principalmente adicionar ().
4.) Vá pelo menu municipal e exibição de saída
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, e espero que seja útil que todos aprendam programação de bootstrap.