Deux méthodes sont utilisées pour lier les listes déroulantes dans les pages HTML traditionnelles :
1) Coder directement en dur le contenu de la liste déroulante dans le JavaScript du HTML et appeler la fonction Javascript pour l'écrire dans le drop -down box dans une boucle. Cette méthode ne convient pas aux situations dans lesquelles le contenu de la liste déroulante change fréquemment. Parce que la source de données et le programme JavaScript sont écrits sur la même page.
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; c
harset=gb2312">
<script LANGUAGE="javascript">
<!--
var onecount;
onecount=0;
subcat = new Array();
subcat[0] = new Array("徐汇区","01","001");
subcat[1] = new Array("嘉定区","01","002");
subcat[2] = new Array("黄浦区","01","003");
subcat[3] = new Array("南昌市","02","004");
subcat[4] = new Array("九江市","02","005");
subcat[5] = new Array("上饶市","02","006");
onecount=6;
function changelocation(locationid)
{
document.myform.smalllocation.length = 0;
var locationid=locationid;
var i;
document.myform.smalllocation.options[0] = new Option('====所有地区====','');
for (i=0;i <onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.myform.smalllocation.options[document.myform.smalllocation.length]
= new Option(subcat[i][0], subcat[i][2]);
}
}
}
//-->
</script>
</head>
<body>
<form name="myform" method="post">
<select name="biglocation"
onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">
<option value="01" selected>上海</option>
<option value="02">江西</option>
</select>
<select name="smalllocation">
<option selected value="">==所有地区==</option>
</select>
</form>
<script LANGUAGE="javascript">
<!--
changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
//-->
</script>
</body>
</html>2) JavaScript lit directement la base de données, prend les enregistrements de la base de données et les écrit en JavaScript, puis, comme la première méthode, appelle la fonction JavaScript pour écrire dans la liste déroulante une boucle. Cette méthode sépare la source de données de JavaScript, mais exposer la connexion à la base de données a peu de valeur pratique du point de vue de la sécurité.
Ma méthode consiste à mettre les données dans la liste déroulante dans un fichier XML, à utiliser javascript pour lire le fichier XML et à obtenir le contenu dans la liste déroulante.
Le fichier HTML est le suivant :
<!-- myfile.html -->
<html>
<head>
<script language="JavaScript" for="window" event="onload">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
var subclass_name="";
loadXML();
function loadXML(){
xmlDoc.async="false";
xmlDoc.load("account.xml");
xmlObj=xmlDoc.documentElement;
nodes = xmlDoc.documentElement.childNodes;
document.frm.mainclass.options.length = 0;
document.frm.subclass.options.length = 0;
for (i=0;i<xmlObj.childNodes.length;i++){
labels=xmlObj.childNodes(i).getAttribute("display_name");
values=xmlObj.childNodes(i).text;
document.frm.mainclass.add(document.createElement("OPTION"));
document.frm.mainclass.options[i].text=labels;
document.frm.mainclass.options[i].value=values;
}
}
</script>
<script language="JavaScript" >
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
function deleteOption() {
}
function setsubclass(main){
var is_selected="N";
if (document.frm.subclass.options.length!=0) {
for (i=0;i<=document.frm.subclass.options.length;i++)
document.frm.subclass.options[i]=null ;
}
//重复才有效
if (document.frm.subclass.options.length!=0) {
for (i=0;i<=document.frm.subclass.options.length;i++){
document.frm.subclass.options[i]=null ;
document.frm.subclass.options.remove(i);
}
}
for (i=0;i<xmlObj.childNodes.length;i++){
var values="";
var lables="";
if (is_selected=="Y") return;
labels=xmlObj.childNodes(i).getAttribute("display_name");
values=xmlObj.childNodes(i).text;
//alert(labels+ " | "+main);
if (labels==main){
is_selected="Y";
for (j=0;j<xmlObj.childNodes(i).childNodes.length;j++){
//subclass_name="document.frm.subclass";
labels=xmlObj.childNodes(i).childNodes(j).getAttribute("display_name");
values=xmlObj.childNodes(i).childNodes(j).text;
//alert(values);
document.frm.subclass.add(document.createElement("OPTION"));
document.frm.subclass.options[j].text=labels;
document.frm.subclass.options[j].value=values;
}
}
}
}
</script>
<title>在HTML中调用XML数据</title>
</head>
<body bgcolor="#FFFFFF">
<FORM NAME="frm">
类型<SELECT NAME="mainclass" OnChange='setsubclass(this[selectedIndex].text)'></SELECT>
<option selected value="" ></option>
子类<SELECT NAME="subclass"></SELECT>
</form>
</body>
</html>
account.xml 如下：
<?xml version="1.0" encoding="GB2312"?>
<item>
<class display_name="未选定">
<subclass display_name="">Not Available</subclass>
</class>
<class display_name="95788主叫卡">
<subclass display_name="1152069589-1152069638">dangdang1</subclass>
<subclass display_name="1152081031-1152081080">dangdang2</subclass>
<subclass display_name="1152547201-1105254750">dangdang3</subclass>
<subclass display_name="1152548401-1152548700">dangdang4</subclass>
<subclass display_name="1152548701-1152549000">dangdang5</subclass>
<subclass display_name="1156000001-1156010000">dangdang6</subclass>
</class>
<class display_name="网上注册">
<subclass display_name="1152000001-1152001000">zhuce_user1</subclass>
<subclass display_name="1151001000-1151005000">zhuce_user2</subclass>
</class>
<class display_name="通讯">
<subclass display_name="1156030001-1156080000">tongxun</subclass>
</class>
</item>Cette méthode sépare la source de données du programme javascript et convient aux sources de données qui changent fréquemment. Dans xmlDoc.load, vous pouvez appeler directement les paramètres d'URL et lire du XML distant pour obtenir un couplage lâche. L'application ci-dessus passe dans IE6.0. L'inconvénient est que lors de la suppression du contenu de la liste déroulante, vous devez
répéter l'opération de suppression, sinon il y aura des bugs évidents. J'espère que certains lecteurs pourront me corriger.
Ce qui précède est l'explication détaillée de Javascript appelant XML pour créer un exemple de code de liste déroulante liée. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
