소규모 지방 및 도시 관련 메뉴는 탐험하는 데 많은 시간이 걸렸습니다. 그 이유는 jQuery에 숙련되지 않았기 때문입니다. 구성 요소를 완성하기 위해 열심히 노력했기 때문에 자연스럽게 사용해야하는 사람들을 위해 공유하고 싶어합니다.
이것은 기본 버전 일 뿐이며 나중에 최적화해야합니다.
코드 : 지방 및 지방 자치 단체 관련 메뉴 다운로드 주소
설명 :
더 이상 SQL 문에 대해서는 이야기하지 않겠습니다. "City.sql"과 "Provincial.sql"두 파일이 포함되어 있습니다.
1. 먼저 데이터를 얻는 것에 대해 이야기합시다
public void initprocitys () {logger.info ( "지역을 얻으십시오"); 목록 <지방> 지방 = provinces.me.getProvincials (); for (지방 지방 : 지방) {list <citys> 도시 = citys.me.getCitySbyProvinCialID (Provincial.getLong ( "id")); Provincial.put ( "Citys", Jsonkit.tojson (Citys)); } setattr ( "지방", 지방); render ( "procity.jsp");}1). 모든 지방 메뉴를 먼저 얻으십시오.
2). 지방 신분증에 따라 해당 시립 메뉴를 받으십시오.
3). 시립 메뉴를 얻을 때 목록은 JSON 데이터로 변환되며 Jackjson은 여기에서 사용됩니다.
2. 페이지 레이아웃에 대해 이야기하십시오
<select name = "province_code"id = "province_select"> <c : foreach items = "$ {provincials}"var = "item"> <옵션 값 = "$ {item.procode}"cdata = '$ {item.citys}'> $ {item.proname} </c : foreach " id = "city_select"> </select>1). 두 개의 선택이 사용되었으며 아직 스타일이 추가되지 않았습니다.
2). Foreach를 사용하여 주 메뉴를 먼저 초기화하고 동시에 도시 데이터를 CDATA 속성에 바인딩합니다.
3. JS 구현에 대해 알려주세요
$ (function () {provincialChange (); var $ provincial = $ ( "#province_select"); $ provincial.change (provincialChange);}); function provincialChange () {var $ provincial = $ ( "#province_select"); // 지방 수준에 표시되는 코드 값 var provincial_code = $ provincial.val (); var $ selectedOption = $ ( '#province_select 옵션 [value =' + provincial_code + ']'); var city_data = yunm.jsoneval ($ selectedOption.attr ( "cdata")); // 시립 메뉴 목록 $ 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 ( "<옵션 값 = '"+code+"'>"+cname+"</옵션>"); }}1). 페이지 초기화로드 및 지방 메뉴 전환이있을 때, 도시 메뉴를로드해야합니다.
2). 먼저 지방 메뉴를 받고 현재 가치를 얻은 다음 값에 따라 옵션을 얻습니다.
3). 옵션에서 시립 데이터를 얻고 Eval을 사용하여 데이터를 변환하는 데주의를 기울이십시오. 구체적인 이유는 주로 add ()가되기 때문일 수 있습니다.
4.) 시립 메뉴 및 출력 디스플레이를 통해 루프
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것이며, 모든 사람들이 부트 스트랩 프로그래밍을 배우는 것이 도움이되기를 바랍니다.