>  기사  >  웹 프론트엔드  >  js xml은 계단식 드롭다운 상자 code_javascript 기술을 생성합니다.

js xml은 계단식 드롭다운 상자 code_javascript 기술을 생성합니다.

WBOY
WBOY원래의
2016-05-16 17:51:34939검색

기본적으로 선택해야 하는 경우 var cityId=city id
다음은 js 코드입니다

코드 복사 코드는 다음과 같습니다.

function readxml() {
var XmlDoc = null
if (window.ActiveXObject) {
XmlDoc = new ActiveXObject(" Microsoft.XMLDOM");
XmlDoc .async = false;
XmlDoc.load(경로 "/web/common/regions.xml");
browse = "ie";
} else if (document.implementation
&& document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument('', '', null)
xmlDoc.load("regions.xml"); 🎜>browse = "ff";
} else {
alert('이 브라우저와 호환되지 않습니다!')
}
var root = XmlDoc.documentElement; 루트 노드 아래의 지방 노드
var Provinces = root.childNodes;
var Province = document.getElementByIdx_x_x("province")
var city = document.getElementByIdx_x_x("regId")
( var i = 0; i < ; Provinces.length; i ) {
// 지방 노드의 name 속성 값을 가져옵니다.
var name = 지방[i].getAttribute("name");
// 옵션 생성
var opt = document_createElement_x_x("option");
// 옵션에 텍스트 추가
opt.a(document_createTextNode(name))// 추가 상위 노드
if(cityId!= null&&cityId!=""){
var city=provinces[i].childNodes
for(var j=0;jif(citys[j].getAttribute ("id")==cityId){
opt.selected="selected";
for ( var j = 0; j < city.length; j ) {
// 옵션 생성
var opt1 = document_createElement_x_x("option");
opt1.value = 도시[j].getAttribute("id")// 옵션 텍스트 추가
opt1.a(document_createTextNode(citys [j]
.getAttribute("name")))
// 상위 노드에 추가
if(citys[j].getAttribute("id" )==cityId){
opt1.selected="선택됨";
}
cities.a(opt1)
}
}
}
}
지방.a(opt);
}
province.onchange = function() {
var pce = document.getElementByIdx_x_x("province");
var opts = pce.options; var opt1 = opts[pce.selectedIndex] ;
var name = opt1.innerText;
for ( var i = 0; i < Provinces.length; i ) {
// 지방 노드의 이름 속성
var name1 = 지방[i].getAttribute("name");
if (name == name1) {
cities.length = 1;// 매번 삭제 변경
var pros = 지방[i] ;
var 도시 = pros.childNodes;
for ( var j = 0; j < city.length; j ) {
// 옵션 만들기
var opt1 = document_createElement_x_x("option" );
opt1.value = 도시[j].getAttribute("id");
// 옵션 텍스트 추가
opt1.a(document_createTextNode( citys[j]
.getAttribute(" name")));
// 상위 노드에 추가
cities.a(opt1)
}
}
}
}


다음은 xml 구조입니다



코드 복사

>

="23" name="충칭" isOpen="0" /> ;