집 >백엔드 개발 >XML/RSS 튜토리얼 >XML 볼륨 실무 팁(4): 메뉴 연결

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

黄舟원래의: 2017-02-10 16:18:331589검색

동기:
이제 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(&#39;Microsoft.XMLDOM&#39;);   //创建一个 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(&#39;OPTION&#39;);
    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=&#39;"+y+"&#39;]/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(&#39;OPTION&#39;);
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
    form1.SelCity.options.add(oOption); 
  }
}

양식 소스 코드

<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 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명：

이전 기사：XML 볼륨 실용 팁(3): 동적 페이징다음 기사：XML 볼륨 실용 팁(3): 동적 페이징

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

관련 기사