집 > 기사 > 웹 프론트엔드 > 도시 보조 연결 선택 플러그인_javascript 기술을 구현하는 JS 간단한 방법

도시 보조 연결 선택 플러그인_javascript 기술을 구현하는 JS 간단한 방법

WBOY원래의: 2016-05-16 15:44:091095검색

이 글의 예시에서는 JS를 이용하여 도시의 2차 연계 선택 플러그인을 간단하게 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

js로 구현한 도시 연계 선택 메뉴는 인터넷에서 흔히 볼 수 있는 내용인데, 자세한 소개는 하지 않겠습니다. 이 도시 선택 메뉴의 프로토타입은 Select를 기반으로 하며 주로 JavaScript를 사용하여 구현됩니다. 배열이나 루프 같은 것 말이죠. 이 효과는 단지 구현 방법을 보여주기 위한 것입니다. 필요한 경우 내부 데이터가 불완전합니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-ejld-city-cha-plug-codes/

구체적인 코드는 다음과 같습니다.

<html>
<head>
<title>Js城市二级联动选择插件</title>
<script>
var citys=new Array(
new Array("南京","淮安","扬州","常州",'其它'),
new Array("北京"),
new Array("天津"),
new Array("上海"),
new Array("其它")
);
function scity(pname,cname){
var province=['江苏省','北京','天津','上海','其它'];
document.write('<select id="pro" onchange="selectc(this)" name="'+pname+'">');
document.write('<option value="">--选择省份--</option>')
for(var i=0;i<province.length;i++){
 document.write('<option value="'+province[i]+'">'+province[i]+'</option>');
}
document.write('</select>');
document.write('<select id="city" name="'+cname+'">');
document.write('<option value="">--选择城市--</option>');
document.write('</select>');
selectc(document.getElementById("pro"));
}
function selectc(pobj){
  var index=pobj.selectedIndex-1;
   var cobj=document.getElementById("city");
   cobj.innerHTML='';
   if(index>=0){
   for(var i=0;i<citys[index].length;i++){
   var option=document.createElement("option");
   var text=citys[index][i];
   option.value=text;
   option.innerHTML=text;
   cobj.appendChild(option);
   }
   }else{
   var option=document.createElement("option");
   option.value="";
   option.innerHTML="--选择城市--";
   cobj.appendChild(option);
   }
}
</script>
</head>
<body>
<script>
 scity('p','c');
</script>
</body>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：JS 텍스트 구형 확대 효과 코드 공유_javascript 기술다음 기사：JS 텍스트 구형 확대 효과 코드 공유_javascript 기술

도시 보조 연결 선택 플러그인_javascript 기술을 구현하는 JS 간단한 방법

관련 기사