시/도 3단계 연계 드롭다운 메뉴 javascript version_javascript 기술
- WBOY원래의
- 2016-05-16 15:45:491562검색
도 및 도시에 대한 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개의 매개변수를 전달해야 합니다
코드 복사 코드는 다음과 같습니다.
var 지역 초기화 = 함수(_region_p, _region_c, _region_d, _region_p_default, _region_c_default, _region_d_default){……}
처음 세 매개변수는 세 개의 드롭다운 목록 컨트롤의 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
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.