作者: 何耀
Thursday, June 5 2003 2:44 PM
传统
HTML页面中连动下拉框采用了两种思路方法:1)直接将下拉框中
内容hardcode于htmljavascript中
javascript
循环写入下拉框中
这种思路方法不适用于下拉框内容经常改变情况
数据源和javascript
写死在同
页面<html>
<head>
<title>List</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; c
har
=gb2312\"><script LANGUAGE=\"javascript\">
<!--
var _disibledevent=>subcat =
Array
;subcat[0] =
Array(\"徐汇区\",\"01\",\"001\");subcat[1] =
Array(\"嘉定区\",\"01\",\"002\");subcat[2] =
Array(\"黄浦区\",\"01\",\"003\");subcat[3] =
Array(\"南昌市\",\"02\",\"004\");subcat[4] =
Array(\" 9江市\",\"02\",\"005\");subcat[5] =
Array(\"上饶市\",\"02\",\"006\");onecount=6;
function changelocation(locationid)
{
document.myform.smalllocation.length = 0;
var locationid=locationid;
var i;
document.myform.smalllocation.options[0] =
Option(\'
所有地区\',\');for (i=0;i <onecount; i
){
(subcat[i][1] locationid){
document.myform.smalllocation.options[document.myform.smalllocation.length]
=
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 直接读取数据库
取数据库中记录写入javascript中然后和第种思路方法样javascript循环写入下拉框中此思路方法将数据源和javascript分开但,公开数据库连接从安全角度说没有多少实用价值我
思路方法是将下拉框中数据放在XML文件中用javascript读XML文件取得下拉框中内容HTML 文件如下:
<!-- myfile.html -->
<html>
<head>
<script language=\"JavaScript\" for=\"window\" event=\"onload\">
var xmlDoc =
ActiveXObject(\"Microsoft.XMLDOM\");var i=0;
var j=0;
var sub
_name=\"\";loadXML
;function loadXML
{xmlDoc.async=\"false\";
xmlDoc.load(\"account.xml\");
xmlObj=xmlDoc.documentElement;
nodes = xmlDoc.documentElement.childNodes;
document.frm.
.options.length = 0; document.frm.sub
.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.
.add(document.createElement(\"OPTION\"));document.frm.
.options[i].text=labels; document.frm.
.options[i].value=values; }
}
</script>
<script language=\"JavaScript\" >
var xmlDoc =
ActiveXObject(\"Microsoft.XMLDOM\");var i=0;
var j=0;
function deleteOption
{}
function
sub(){var is_selected=\"N\";
(document.frm.sub.options.length!=0) { for (i=0;i<=document.frm.sub
.options.length;i)document.frm.sub
.options[i]=null ;}
//重复才有效
(document.frm.sub.options.length!=0) { for (i=0;i<=document.frm.sub
.options.length;i){document.frm.sub
.options[i]=null ;document.frm.sub
.options.remove(i);}
}
for (i=0;i<xmlObj.childNodes.length;i
){var values=\"\";
var lables=\"\";
(is_selected\"Y\") 
;labels=xmlObj.childNodes(i).getAttribute(\"display_name\");
values=xmlObj.childNodes(i).text;
//alert(labels+ \" | \"+
); (labels){is_selected=\"Y\";
for (j=0;j<xmlObj.childNodes(i).childNodes.length;j
){//sub
_name=\"document.frm.sub\";labels=xmlObj.childNodes(i).childNodes(j).getAttribute(\"display_name\");
values=xmlObj.childNodes(i).childNodes(j).text;
//alert(values);
document.frm.sub
.add(document.createElement(\"OPTION\"));document.frm.sub
.options[j].text=labels; document.frm.sub
.options[j].value=values; }
}
}
}
</script>
<title>在HTML中
XML数据</title></head>
<body bgcolor=\"#FFFFFF\">
<FORM NAME=\"frm\">
类型<SELECT NAME=\"
\" _disibledevent=><option selected value=\"\" ></option>子类<SELECT NAME=\"sub
\"></SELECT>
</form>
</body>
</html>
account.xml 如下:
<?xml version=\"1.0\" encoding=\"GB2312\"?>
<item>
<
display_name=\"未选定\"><sub
display_name=\"\">Not Available</sub> </
><
display_name=\"95788主叫卡\"><sub
display_name=\"1152069589-1152069638\">dangdang1</sub> <sub
display_name=\"1152081031-1152081080\">dangdang2</sub><sub
display_name=\"1152547201-1105254750\">dangdang3</sub><sub
display_name=\"1152548401-1152548700\">dangdang4</sub><sub
display_name=\"1152548701-1152549000\">dangdang5</sub><sub
display_name=\"1156000001-1156010000\">dangdang6</sub></
><
display_name=\"网上注册\"><sub
display_name=\"1152000001-1152001000\">zhuce_user1</sub> <sub
display_name=\"1151001000-1151005000\">zhuce_user2</sub></
><
display_name=\"通讯\"><sub
display_name=\"1156030001-1156080000\">tongxun</sub> </
></item>
此思路方法将数据源和javascript
分开适合经常变化数据源xmlDoc.load中可以直接URL参数,读取远程XML实现松耦合以上应用在IE6.0中通过不足的处是在去除下拉框列表内容时需要重复执行删除操作
否则会有明显bug.希望有读者能给指正
最新评论