집 >백엔드 개발 >XML/RSS 튜토리얼 >XML 실용 요령 4권: 메뉴 연결
XML 실용 요령 4권: 메뉴 연결
- 巴扎黑원래의
- 2017-03-19 15:45:281576검색
[소개] 이제 IE에서 xml을 사용하는 작은 예를 들어 보겠습니다. 이중 드롭다운 메뉴의 연결 문제를 해결합니다. 아마도 가장 일반적인 예는 주를 선택한 다음 도시 옵션을 변경하는 것이므로 XML을 사용하여 이를 완성해 보겠습니다. 이전에 소개한 기능 중 일부는 XML+XSL 파일을 사용하여 직접 구현했습니다.
이제 IE에서 xml을 적용하는 간단한 예를 들어 보겠습니다. 이중 드롭다운 메뉴의 연결 문제를 해결합니다. 아마도 가장 일반적인 예는 주를 선택한 다음 도시 옵션을 변경하는 것이므로 XML을 사용하여 이를 완성해 보겠습니다.
이전에 소개한 기능 중 일부를 XML+XSL 파일을 직접 사용하여 사용법이 익숙하지 않을 수 있으므로 이번에는 모두에게 친숙해지기를 바라면서 HMTL+XML을 사용하겠습니다. 명확한 이해 - "XML은 이렇게 간단할 수 있습니다!" :)
자료:
XML 볼륨 메뉴 연결
Citys.xml 및 CitySelect.htm
기능:
도를 선택하면 해당 도시가 자동으로 표시되므로 사용자에게 편리하고 데이터 상호 작용을 효과적으로 개선하며 페이지를 더욱 다채롭게 만들 수 있습니다.
효과:
여기에서 찾아보기
코드:
Citys.xml
<?xml version="1.0" encoding="gb2312"?>
<China>
<State id="1" name="江西">
<City>九江</City>
<City>南昌</City>
<City>庐山</City>
<City>景德镇</City>
</State>
<State id="2" name="北京">
<City>北京西</City>
<City>居庸关</City>
<City>清华园</City>
<City>周口店</City>
</State>
<State id="3" name="福建">
<City>福州</City>
<City>厦门</City>
<City>漳州</City>
</State>
<State id="4" name="甘肃">
<City>兰州</City>
<City>洛门</City>
<City>嘉峪关</City>
</State>
<State id="5" name="广东">
<City>广州</City>
<City>深圳</City>
<City>东莞</City>
<City>石牌</City>
</State>
<State id="6" name="安徽">
<City>合肥</City>
<City>黄山</City>
<City>九龙岗</City>
<City>马鞍山</City>
</State>
</China>
CitySelect.htm
사용자 정의 기능: ChooseState
(XML 데이터에서 지방 이름을 읽어 SelState 드롭다운 목록에 추가)
function ChooseState()
{
var source;
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //创建一个 MSXML解析器实例
source.async = false;
source.load(sourceName); //装入XML文档
root = source.documentElement; //设置文档元素为根节点元素
sortField=root.selectNodes("//@name"); //搜索属性中含有name的所有节点
for(var i=0;i<sortField.length;++i) //增加省份名称到下拉列表
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelState.options.add(oOption);
}
ChooseCity();
}
사용자 정의 기능: ChooseCity
( 현재 선택된 지방 이름에 따라 XML 데이터에서 해당 도시 이름을 읽어 SelCity 드롭다운 목록에 추가합니다.)
function ChooseCity()
{
x=form1.SelState.selectedIndex; //读取省份下拉框的当前选项
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //搜索name属性值等于
参数y的State节点下的所有city节点
for(var i=form1.SelCity.options.length-1;i>=0;--i) //撤消原来的列表项
{
form1.SelCity.options.remove(i)
}
for(var i=0;i<sortField.length;++i) //增加城市名称到下拉列表
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}
양식 source code
<BODY onLoad="ChooseState()"> <FORM action="" method="post" id="form1" name="form1"> <SELECT name="SelState" id="SelState" onchange="ChooseCity()" > </SELECT> <SELECT name="SelCity" id="SelCity" > </SELECT> </FORM> </BODY>
Postscript:
처음 XML을 배우기 시작할 때 다른 사람들과 똑같은 혼란을 느꼈습니다. "XML을 배웠는데 어떻게 사용해야 할까요?" "뭐라구요? "이 질문이 오랫동안 저를 머뭇거리게 했습니다...
전자상거래와 소프트웨어 개발이 제 전문분야이기 때문에 무엇부터 시작하는 것이 좋을까 생각했습니다. 나는 가장 잘 알고 있습니다. 그래서 웹 사이트 구축에서 가장 일반적으로 사용되는 기능 중 일부를 XML로 구현했습니다. 당신도 할 수 있습니다!
위 내용은 XML 실용 요령 4권: 메뉴 연결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!