JavaScript 개발에서 3단계 연결의 전체 코드 표시

으르르르르

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动</title> <style> *{margin:0;padding:0;} </style> </head> <body> <div> 请选择地区： <select name="" id="proc" onchange="showCity()"> <option value="">--请选择省--</option> </select> <select name="" id="city" onchange="showDist()"> <option value="">--请选择市--</option> </select> <select name="" id="dist"> <option value="">--请选择区--</option> </select> </div> <script type="text/javascript" src=""></script> <script> //声明省 var oProc = ["安徽","上海","山东"]; //直接声明array //声明市 var oCity = [ ["合肥","淮南","芜湖"], ["浦东","闵行","浦西"], ["济南","青岛","枣庄"] ]; //声明区 var oDist = [ [ ["政务区","庐阳区","蜀山区"], ["田家庵区","大通区","九龙岗区"], ["镜湖区","鸠江区","三山区"] ], [ ["浦东1","浦东2","浦东3"], ["闵行1","闵行2","闵行3"], ["浦西1","浦西","浦西3"] ], [ ["历下区","天桥区","长清区"], ["市南区","市北区","李沧区"], ["薛城区","市中区","峄城区"] ] ]; var oproc = document.getElementById("proc"); var ocity = document.getElementById("city"); var odist = document.getElementById("dist"); window.onload = function(){ for(var i =0;i<oProc.length;i++){ //创建元素节点 var oOpt = document.createElement("option"); //创建文本节点 var oTxt = document.createTextNode(oProc[i]); oOpt.appendChild(oTxt); oproc.appendChild(oOpt); } }; function showCity(){ if(oproc.value=="-1"){ ocity.options.length = 1; odist.options.length = 1; }else{ ocity.options.length = 1; odist.options.length = 1; var num = oproc.options.selectedIndex; //console.log(num); for(var i =0;i<oCity[num-1].length;i++){ var oOpt = document.createElement("option"); var oTxt = document.createTextNode(oCity[num-1][i]); oOpt.appendChild(oTxt); ocity.appendChild(oOpt); } } } function showDist(){ if(ocity.value=='-1'){ odist.options.length = 1 }else{ odist.options.length = 1; var numPro = oproc.options.selectedIndex; var numCity = ocity.options.selectedIndex; for(var i=0;i<oDist[numPro-1][numCity-1].length;i++){ var oOpt = document.createElement("option"); var oTxt = document.createTextNode(oDist[numPro-1][numCity-1][i]); oOpt.appendChild(oTxt); odist.appendChild(oOpt); } } } </script> </body> </html>

제출하다 코드 재설정

자동운전

JavaScript 개발에서 3단계 연결의 전체 코드 표시

초등학교Imperial CMS 기업 모방 웹사이트 튜토리얼

초등학교WordPress에 기초가 전혀 없는 초보자는 개인 블로그와 기업 웹 사이트를 구축합니다.

초등학교궁극의 CMS 제로 기반 웹사이트 구축 지침 영상

초등학교프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]

중급Vue3.0 from 0을 통해 범용 백엔드 관리 시스템 프로젝트 실습 구축

초등학교제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]

초등학교웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]

초등학교apipost에 대한 빠른 소개

중급Vue3+TypeScript 실무 튜토리얼-엔터프라이즈 수준 프로젝트 실습

초등학교PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다.

중급VUE 전자상거래 프로젝트(프론트엔드 & 백엔드 듀얼 프로젝트 실전)

초등학교Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]