XML 볼륨 실무 팁(4): 메뉴 연결

동기 부여:
이제 IE에서 XML을 적용하는 간단한 예를 살펴보겠습니다. 이중 드롭다운 메뉴의 연결 문제를 해결합니다. 아마도 가장 일반적인 예는 주를 선택한 다음 도시 옵션을 변경하는 것이므로 XML을 사용하여 이를 완성해 보겠습니다.

이전에 소개한 기능 중 일부는 XML+XSL 파일을 사용하여 직접 구현되었습니다. 사용법이 익숙하지 않을 수 있으므로 이번에는 모두에게 더 명확한 이해를 제공하기 위해 HMTL+XML을 사용하겠습니다. 단순한!" :)

재료:

이라는

두 개의 파일이 연결되어 있습니다.

지방을 선택하면 해당 도시가 자동으로 표시되므로 사용자에게 편리하고 데이터 상호 작용을 효과적으로 개선하며 페이지를 더욱 다채롭게 만들 수 있습니다.
효과:
여기에서 찾아보세요
암호:
도시.xml

<중국>

지우장
난창
루산
징더전


베이징 서부
거용관
청화원
저우커우뎬


푸저우
<시티>샤먼
장저우


란저우
로멘
가욕관


광저우
심천
<시티>동관
시파이


허페이
황산
구룡 언덕
마안산

CitySelect.htm

사용자 정의 함수: ChooseState
(XML 데이터의 지방 이름을 읽어 SelState의 드롭다운 목록에 추가하세요)

함수선택상태()
{
var 소스;
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //MSXML 파서 인스턴스 생성
소스.비동기 = 거짓;
source.load(sourceName); //XML 문서 로드
root = source.documentElement; //문서 요소를 루트 노드 요소로 설정합니다.
sortField=root.selectNodes(" //@name "); //속성에 name이 포함된 모든 노드를 검색합니다.
for(var i=0;i {
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelState.options.add(oOption);
}
선택도시();
}

사용자 정의 기능: ChooseCity
(현재 선택된 지방명을 기준으로 XML 데이터에서 해당 도시명을 읽어 SelCity 드롭다운 목록에 추가합니다.)
함수선택도시()
{
x=form1.SelState.selectedIndex; //현재 지역 드롭다운 상자의 옵션을 읽습니다.
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //이름 속성 값이 매개변수 y와 동일한 State 노드 아래의 모든 도시 노드를 검색합니다.
for(var i=form1.SelCity.options.length-1;i>=0;--i) //원본 목록 항목 실행 취소
{
form1.SelCity.options.remove(i)
}
for(var i=0;i {
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}

양식 소스 코드

추신:
처음 XML을 배우기 시작했을 때 나는 다른 사람들과 마찬가지로 "XML을 배웠는데 어떻게 사용해야 하는가?"라는 혼란을 겪었습니다. 이 질문은 오랫동안 저를 방해했습니다. 전자

상거래 때문에 그리고 소프트웨어 개발은 ​​제 전문분야이기 때문에, 제가 가장 잘 알고 있는 것부터 시작하는 것이 좋겠다고 생각했습니다. 그래서 웹 사이트 구축에서 가장 일반적으로 사용되는 기능 중 일부를 XML로 구현했습니다. 당신도 할 수 있습니다!