XML Practical Cheats Volume 4 : Liens vers les menus-Tutoriel XML/RSS-php.cn

XML Practical Cheats Volume 4 : Liens vers les menus

巴扎黑

Libérer： 2017-03-19 15:45:28

original

1568 Les gens l'ont consulté

[Introduction] Faisons maintenant un petit exemple d'utilisation de XML dans IE : résoudre le problème de liaison des menus déroulants doubles. L'exemple le plus courant consiste peut-être à sélectionner une province, puis à modifier les options de ville. Essayons donc d'utiliser XML pour le compléter. Certaines des fonctions introduites précédemment ont été implémentées directement à l'aide de fichiers XML XSL

Prenons maintenant un petit exemple d'application de XML dans IE : résoudre le problème de liaison des menus déroulants doubles. L'exemple le plus courant consiste peut-être à sélectionner une province, puis à modifier les options de ville. Essayons donc d'utiliser XML pour le compléter.

J'ai implémenté certaines fonctions introduites avant d'utiliser directement les fichiers XML XSL. Vous n'êtes peut-être pas très familier avec son utilisation, j'utiliserai donc HMTL XML cette fois, dans l'espoir que tout le monde comprenne - "XML peut. soyez si simple!" :)

Matériaux :
Lien vers le menu de sélection de volume XML
Il y a 2 fichiers : Citys.xml et CitySelect.htm

Fonction :
Après avoir sélectionné une province, la ville correspondante peut être automatiquement affichée, ce qui est pratique pour les utilisateurs, améliore efficacement l'interaction des données et rend votre page plus colorée.
Effet :
Parcourir ici
Code :
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>

Copier après la connexion

CitySelect.htm

Fonction personnalisée : ChooseState
(Lisez le nom de la province dans les données XML et ajoutez-le à la liste déroulante 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();
}

Copier après la connexion

Fonction personnalisée : ChooseCity
(Lisez le nom de la ville correspondant dans les données XML en fonction du nom de la province actuellement sélectionnée et ajoutez-le à la liste déroulante 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); 
  }
}

Copier après la connexion

Code source du formulaire

<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>

Copier après la connexion

Postscript :
Quand j'ai commencé à apprendre XML, j'avais la même confusion que tout le monde --- "J'ai appris XML , mais comment utiliser ce XML ? "Cette question me gêne depuis longtemps...

Parce que le e-commerce et le développement de logiciels sont mon expertise, je pense donc qu'il est préférable de commencer par mon entourage . Commençons par quelque chose de familier. J'ai donc implémenté certaines des fonctions les plus couramment utilisées dans la construction de sites Web en XML. Vous pouvez le faire aussi !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!