시/도 3단계 연계 드롭다운 메뉴 javascript version_javascript 기술-JS 튜토리얼-php.cn

시/도 3단계 연계 드롭다운 메뉴 javascript version_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:45:49

원래의

1546명이 탐색했습니다.

도 및 도시에 대한 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

로그인 후 복사