도 및 도시에 대한 3단계 드롭다운 목록 상자를 구현하고 연계 효과를 구현합니다.
방법 1:
1. 코드 보기
<select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" data-code="@Model.City"> </select> <select class="dist" id="area5" name="Area" data-code="@Model.Area"> </select> @Html.HiddenFor(m => m.Province) @Html.HiddenFor(m => m.City) @Html.HiddenFor(m => m.Area)
2.JS 호출
<script type="text/javascript"> var selectVa2 = new CitySelect({ data: data, provId: "#prov5", cityId: '#city5', areaId: '#area5', isSelect: true }); </script>
3. 가져온 js
<script src="@Url.Content("~/Themes/Admin/JS/jquery-1.4.4.min.js")" type="text/javascript"></script> <script src="@Url.Content("/Themes/Admin/JS/city2.js")" type="text/javascript"></script> <script src="@Url.Content("/Themes/Admin/JS/citySelect2.js")" type="text/javascript"></script>
4.js 플러그인 다운로드 주소
js 플러그인 다운로드 주소: http://files.cnblogs.com/files/weishuanbao/province 및 city.rar
방법 2:
선택한 지방과 해당 도시를 기준으로 효과가 발휘됩니다.
다음은 HTML 코드입니다
<html> <body> <label for="select_city">城市</label> <div data-role="controlgroup" id="select_p_c_a" data-ajax="false"> <select id="select_province"></select> <select id="select_city"></select> <select id="select_area"></select> </div> <script src="test.js"></script> </body> </html> <script> region_init("select_province","select_city","select_area"); </script> </body> </html>
다음은 js 코드입니다. 주로 중국 성 및 도시의 전체 열거 매개변수가 포함되어 있기 때문에 코드가 상대적으로 깁니다. 누구나 사용할 수 있습니다. 주로 말하면, 사용자 정의 기본값을 구현하려면 지역_init 메소드를 호출할 때 6개의 매개변수를 전달해야 합니다
처음 세 매개변수는 세 개의 드롭다운 목록 컨트롤의 ID입니다. 마지막 세 매개변수는 값을 전달할 필요가 없습니다. 값이 전달되지 않으면 드롭다운 목록의 최종 결과가 기본값이 됩니다. 각 목록의 첫 번째 값을 설정하려는 경우 기본값을 사용하는 경우 이 세 가지 매개 변수에 해당하는 해당 주 및 도시 값을 전달해야 합니다. 해당 지방과 도시의 값은 열거형에서 찾아볼 수 있습니다. 그래도 이해가 안 가시거나 열거형에 문제가 있으시면 편하게 토론해주세요.
다음은 제가 만든 test.js 코드입니다.
//省、市、区 var 지역 초기화 = 함수 (_region_p, _region_c, _region_d, _region_p_default, _region_c_default, _region_d_default) { var 지역_p = document.getElementById(_region_p); var 지역_c = document.getElementById(_region_c); var 지역_d = document.getElementById(_region_d); 함수 option_items_select(cmb, 값) { for (var i = 0; i < cmb.options.length; i ) { if (cmb.options[i].value == value) { cmb.selectedIndex = i; 반품; } } } //附加값, 텍스트 함수 option_items_add(cmb, value, text, obj, i) { var option = document.createElement("OPTION"); cmb.options.add(옵션); option.innerText = 텍스트; 옵션.값 = 값; option.obj = obj; } 함수 지역_c_change() { Region_d.options.length = 0; if (region_c.selectedIndex == -1)return; var 항목 = 지역_c.옵션[region_c.selectedIndex].obj; for (var i = 0; i < item.district.length; i ) { option_items_add(region_d, item.district[i].id, item.district[i].name, null, i); } option_items_select(region_d, _region_d_default); } 함수 Region_p_change() { 지역_c.옵션.길이 = 0; 지역_c.onchange = null; if (region_p.selectedIndex == -1)return; var 항목 = 지역_p.옵션[region_p.selectedIndex].obj; for (var i = 0; i