Maison > Article > développement back-end > Conseils pratiques sur le volume XML (4) : Liens de menu
Conseils pratiques sur le volume XML (4) : Liens de menu
- 黄舟original
- 2017-02-10 16:18:331562parcourir
Motivation :
Faisons maintenant un petit exemple d'application de XML dans IE : résoudre le problème de liaison des doubles menus déroulants. 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>CitySelect.htm
Fonction personnalisée : ChooseState
(Lecture des données XML Le nom de la province et ajouté à la liste déroulante de 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();
}Fonction personnalisée : ChooseCity
(Lire les données XML en fonction du nom de la province actuellement sélectionnée Le nom de la ville correspondante et ajouté à la liste déroulante de 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);
}
}
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>
Post-scriptum :
Quand j'ai commencé à apprendre le XML, j'avais la même confusion que tout le monde : « J'ai appris le XML, mais comment dois-je l'utiliser ? Cette question me gêne depuis très, très longtemps.....
Parce que le commerce électronique et le développement de logiciels sont mon expertise, j'ai donc pensé qu'il serait préférable de commencer par ce que je connais le mieux. 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 concerne les conseils pratiques pour le volume XML (4) : contenu des liens de menu. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !