Author: He Yao
Thursday, June 5 2003 2:44 PM
There are two methods for connecting drop-down boxes in traditional HTML pages:
1) Directly hardcode the content in the drop-down box into html's javascript, and call the javascript function to write it loop into the drop-down box. This method does not apply to situations where the content of the drop-down box changes frequently. Because the data source and the javascript program are written on the same 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("Xuhui District","01","001");
subcat[1] = new Array("Jiading District","01","002");
subcat[2] = new Array("Huangpu District","01","003");
subcat[3] = new Array("Nanchang City","02","004");
subcat[4] = new Array("Jiujiang City","02","005");
subcat[5] = new Array("Shangrao City","02","006");
onecount=6;
function changelocation(locationid)
{
= 0;
var locationid=locationid;
var i;
[0] = new Option('====All regions====','');
for (i=0;i <onecount; i++)
{
if (subcat[i][1] == locationid)
{
[]
= new Option(subcat[i][0], subcat[i][2]);
}
}
}
//-->
</script>
</head>
<body>
<form name="myform" method="post">
<select name="biglocation"
onChange="changelocation([].value)">
<option value="01" selected>Shanghai</option>
<option value="02">Jiangxi</option>
</select>
<select name="smalllocation">
<option selected value="">==All regions==</option>
</select>
</form>
<script LANGUAGE="javascript">
<!--
changelocation([].value);
//-->
</script>
</body>
</html>
2) Javascript directly reads the database, takes the records in the database and writes them to JavaScript, and then, like the first method, call the javascript function to loop into the drop-down box. This method separates the data source from JavaScript, but, exposing the connection to the database, from a security point of view, does not have much practical value.
My method is to put the data in the drop-down box in an XML file, read the XML file in javascript, and get the contents in the drop-down box.
The HTML file is as follows:
<!-- -->
<html>
<head>
<script language="JavaScript" for="window" event="onload">
var xmlDoc = new ActiveXObject("");
var i=0;
var j=0;
var subclass_name="";
loadXML();
function loadXML(){
="false";
("");
xmlObj=;
nodes = ;
= 0;
= 0;
for (i=0;i<;i++){
labels=(i).getAttribute("display_name");
values=(i).text;
(("OPTION"));
[i].text=labels;
[i].value=values;
}
}
</script>
<script language="JavaScript" >
var xmlDoc = new ActiveXObject("");
var i=0;
var j=0;
function deleteOption() {
}
function setsubclass(main){
var is_selected="N";
if (!=0) {
for (i=0;i<=;i++)
[i]=null ;
}
//Repeat only works
if (!=0) {
for (i=0;i<=;i++){
[i]=null ;
(i);
}
}
for (i=0;i<;i++){
var values="";
var lables="";
if (is_selected=="Y") return;
labels=(i).getAttribute("display_name");
values=(i).text;
//alert(labels+ " | "+main);
if (labels==main){
is_selected="Y";
for (j=0;j<(i).;j++){
//subclass_name="";
labels=(i).childNodes(j).getAttribute("display_name");
values=(i).childNodes(j).text;
//alert(values);
(("OPTION"));
[j].text=labels;
[j].value=values;
}
}
}
}
</script>
<title>Calling XML data in HTML</title>
</head>
<body bgcolor="#FFFFFF">
<FORM NAME="frm">
Type <SELECT NAME="mainclass" OnChange='setsubclass(this[selectedIndex].text)'></SELECT>
<option selected value="" ></option>
Subclass <SELECT NAME="subclass"></SELECT>
</form>
</body>
</html>
as follows:
<?xml version="1.0" encoding="GB2312"?>
<item>
<class display_name="not selected">
<subclass display_name="">Not Available</subclass>
</class>
<class display_name="95788 Calling Card">
<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="Online Registration">
<subclass display_name="1152000001-1152001000">zhuce_user1</subclass>
<subclass display_name="1151001000-1151005000">zhuce_user2</subclass>
</class>
<class display_name="Communication">
<subclass display_name="1156030001-1156080000">tongxun</subclass>
</class>
</item>
This method separates the data source from the javascript program and is suitable for frequently changing data sources. You can directly call URL parameters to read remote XML to achieve loose coupling. The above application is passed in IE6.0. The disadvantage is that it is necessary to remove the content of the drop-down box list
Repeat the deletion operation, otherwise there will be obvious bugs. I hope some readers can correct it.