Filed under: 程序开发 |
Posted on December 5th, 2006 by 李 方进
在公司，我们团队的项目开发与设计正在逐步的要求标准化、规范化。鉴于firefox的使用者比例越来越高，因此项目进入测试阶段后，我们会采用ie和firefox两种浏览器进行测试。问题出来了，在今天的一个项目测试中，IE下支持的两级联动菜单，到了firefox就不支持了。有趣的是，技术部的程序员居然告诉该项目PM，他不会解决。君既自认不能为之，则吾改之矣。经过几分钟的修改，搞定。
原代码如下：
<SCRIPT language=”javascript”>
switch (document.coform.province.value) {
case ” :
var labels = new Array(’请选择城市’);
var values = new Array(”);
break;
case ‘安徽省’ :
var labels = new Array(’合肥市’,'淮北市’,'淮南市’,'黄山市’,'安庆市’,'蚌埠市’,'巢湖地区’,'池州地区’,'滁州市’,'六安地区’,'马鞍山市’,'宣城地区’,'宿县地区’,'铜陵市’,'芜湖市’,'阜阳市’);
var values = new Array(’合肥市’,'淮北市’,'淮南市’,'黄山市’,'安庆市’,'蚌埠市’,'巢湖地区’,'池州地区’,'滁州市’,'六安地区’,'马鞍山市’,'宣城地区’,'宿县地区’,'铜陵市’,'芜湖市’,'阜阳市’);
break;
document.coform.citys.options.length = 0;
var j=0;
// 从数组中添加内容
for(var i = 0; i <labels.length; i++) {
document.coform.citys.add(document.createElement(”OPTION”));
document.coform.citys.options[i].text=labels[i];
document.coform.citys.options[i].value=values[i];
if (labels[i]==str)
{
j=i;
}
}
document.coform.citys.selectedIndex = j; }
< /SCRIPT>
<form name=”coform” action=”" method=”post”>
<select NAME=”province” OnChange=”setcitys()”>
<option value=”" selected>请选择省份</option><option value=”安徽省” selected>安徽省</option>< /select>
<SELECT name=”citys”><option value=”0″>请选择城市</option></SELECT>
<SCRIPT language=”JavaScript”>setcitys();</SCRIPT>
< /form>
改进后的代码：
<SCRIPT language=”javascript”>
switch (document.getElementById(”sprovince”).value) {
case ” :
var labels = new Array(’请选择城市’);
var values = new Array(”);
break;
case ‘安徽省’ :
var labels = new Array(’合肥市’,'淮北市’,'淮南市’,'黄山市’,'安庆市’,'蚌埠市’,'巢湖地区’,'池州地区’,'滁州市’,'六安地区’,'马鞍山市’,'宣城地区’,'宿县地区’,'铜陵市’,'芜湖市’,'阜阳市’);
var values = new Array(’合肥市’,'淮北市’,'淮南市’,'黄山市’,'安庆市’,'蚌埠市’,'巢湖地区’,'池州地区’,'滁州市’,'六安地区’,'马鞍山市’,'宣城地区’,'宿县地区’,'铜陵市’,'芜湖市’,'阜阳市’);
break;
document.getElementById(”scitys”).options.length = 0;
var j=0;
// 从数组中添加内容
for(var i = 0; i <labels.length; i++) {
document.getElementById(”scitys”).appendChild(document.createElement(”OPTION”));
document.getElementById(”scitys”).options[i].text=labels[i];
document.getElementById(”scitys”).options[i].value=values[i];
if (labels[i]==str)
{
j=i;
}
}
document.getElementById(”scitys”).selectedIndex = j; }
< /SCRIPT>
<form name=”coform” action=”" method=”post”>
<select NAME=”province” id=sprovince OnChange=”setcitys()”>
<option value=”" selected>请选择省份</option><option value=”安徽省” selected>安徽省</option>< /select>
<SELECT id=scitys name=”citys”><option value=”0″>请选择城市</option></SELECT>
<SCRIPT language=”JavaScript”>setcitys();</SCRIPT>
< /form>
两者的差异：
１、采用document.getElementById(”")标记html标签
2、appendChild替换了add方法
简单的几个改造，就能使该两级联动菜单同时支持ie及firefox了。
PS:时间有限,未对该代码进行精简
Leave a Reply