Home > Developer > JavaScript
There are two ways to move a drop-down box in a traditional HTML page:
1 directly hardcode the contents of the dropdown box into JavaScript in HTML, invoking JavaScript function loops to write to the Drop-down box. This method does not apply to situations where the content of the dropdown box changes frequently. Because the data source and JavaScript program are written dead on the same page.
<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", "01", "002");
SUBCAT[2] = new Array ("Huangpu", "01", "003");
SUBCAT[3] = new Array ("Nanchang", "02", "004");
SUBCAT[4] = new Array ("Jiujiang", "02", "005");
SUBCAT[5] = new Array ("Shangrao", "02", "006");
onecount=6;
function Changelocation (LocationID)
{
document.myform.smalllocation.length = 0;
var Locationid=locationid;
var i;
Document.myform.smalllocation.options[0] = new Option (' = = = = = = ALL Regions = = = = '];
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>
<body>
<form name= "MyForm" method= "POST" >
<select name= "Biglocation"
>
<option value= "selected>" Shanghai </option>
<option value= > Jiangxi </option>
</select>
<select name= "Smalllocation" >
<option selected Value= "" >== All areas ==</option>
</select>
</form>
<script language= "JavaScript" >
<!--
Changelocation (Document.myform.biglocation.options[document.myform.biglocation.selectedindex].value);
-->
</script>
</body>
2 JavaScript reads the database directly, takes the records in the database to the JavaScript, and then, like the first method, invokes the JavaScript function loop to write to the Drop-down box. This method separates the data source from JavaScript, but exposes the connection to the database and, from a security standpoint, has little practical value.
My approach is to put the data in the Drop-down box in an XML file, read the XML file with JavaScript, and get the contents of the Drop-down box.
The HTML file is as follows:
<!--myfile.html-->
<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;
}
Repetition only works.
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> call XML data in HTML </title>
<body bgcolor= "#FFFFFF" >
<form name= "frm" >
Type <select name= "MainClass" ></SELECT>
<option selected Value= "" ></option>
Sub-class <select name= "Subclass" ></SELECT>
</form>
</body>
Account.xml is 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 main call 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= "Communications" >
<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. Xmldoc.load can call URL parameters directly, read remote XML, and achieve loose coupling. The above application is passed in the IE6.0. The disadvantage is that you need to remove the dropdown box list content
Repeat the delete operation, otherwise there will be a noticeable bug. I hope that some readers can correct me.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
