JS联动菜单在IE与FireFox兼容性问题怎么兼顾？

若网页使用标准的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
定义，则在FireFOX联动菜单第二级开始不能选择。若使用传统的
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
定义，则所有的联动菜单都有效。附，省市县三级菜单调用
<script language="javascript" src="Area_All.js"></script>
<script language="javascript" src="Area_Function.js"></script><select name="Province"  id="Province" onChange="SelChgCity('City' , document.all.Province.options[document.all.Province.selectedIndex].value , arrProvince , arrCity , 'County');"></select><select name="City"  id="City" onChange="SelChgCounty('County' , document.all.City.options[document.all.City.selectedIndex].value , arrCity , arrCounty);"></select>
 <select name="County"  id="County"></select>Area_All.js
var arrProvince = new Array();
var arrCity = new Array();
var arrCounty = new Array();var i = 0;
var j = 0;
var k = 0;arrProvince[i] = "云南";
arrCity[i] = new Array();
arrCounty[i] = new Array(); j = 0;
arrCity[i][j] = "昆明";
arrCounty[i][j] = new Array(); k = 0;
arrCounty[i][j][k++] = "盘龙区";
arrCounty[i][j][k++] = "五华区";
arrCounty[i][j][k++] = "官渡区";
arrCounty[i][j][k++] = "西山区";
arrCounty[i][j][k++] = "东川区";
arrCounty[i][j][k++] = "呈贡县";
arrCounty[i][j][k++] = "安宁市";
arrCounty[i][j][k++] = "富民县";
arrCounty[i][j][k++] = "晋宁县";
arrCounty[i][j][k++] = "禄劝彝族苗族自治县";
arrCounty[i][j][k++] = "石林彝族自治县";
arrCounty[i][j][k++] = "寻甸回族自治县";
arrCounty[i][j][k++] = "宜良县";
arrCounty[i][j][k++] = "嵩明县"; j++;

i++;Area_Function.js// JavaScript Documentfunction InitArea(ObjProvince , ObjCity , ObjCounty , ObjProvinceArray , ObjCityArray , ObjCountyArray , strProvince , strCity , strCounty)
{
var thisProvince = document.getElementById(ObjProvince);
var thisCity = document.getElementById(ObjCity);
var thisCounty = document.getElementById(ObjCounty);

thisProvince.options[0] = new Option("省份" , "");
thisCity.options[0] = new Option("地级市" , "");
thisCounty.options[0] = new Option("不限" , "不限");

for(var i = 0; i < ObjProvinceArray.length; i++)
{
thisProvince.options[i+1] = new Option(ObjProvinceArray[i] , ObjProvinceArray[i]);
if(ObjProvinceArray[i] == strProvince)
thisProvince.options[i+1].selected = true;
}

if(strProvince != "")
{
for(i = 0; i < ObjProvinceArray.length; i++)
{
if(ObjProvinceArray[i] == strProvince)
{
for(var j = 0; j < ObjCityArray[i].length; j++)
{
thisCity.options[j + 1] = new Option(ObjCityArray[i][j], ObjCityArray[i][j]);
if(ObjCityArray[i][j] == strCity)
thisCity.options[j + 1].selected = true;
}
}
} }

if(strCity != "")
{
for(i = 0; i < ObjCityArray.length; i++)
{
for(j = 0; j < ObjCityArray[i].length; j++)
{
if(ObjCityArray[i][j] == strCity)
{
for(var k = 0; k < ObjCountyArray[i][j].length; k++)
{
thisCounty.options[k + 1] = new Option(ObjCountyArray[i][j][k], ObjCountyArray[i][j][k]);
if(ObjCountyArray[i][j][k] == strCounty)
thisCounty.options[k + 1].selected = true;
}
}
}
} }

}function FzInitArea(ObjProvince , ObjCity , ObjCounty , ObjProvinceArray , ObjCityArray , ObjCountyArray , strProvince , strCity , strCounty)
{
var thisProvince = document.getElementById(ObjProvince);
var thisCity = document.getElementById(ObjCity);
var thisCounty = document.getElementById(ObjCounty);

//thisProvince.options[0] = new Option("省份" , "");
//thisCity.options[0] = new Option("地级市" , "");
//thisCounty.options[0] = new Option("不限" , "不限");

for(var i = 0; i < ObjProvinceArray.length; i++)
{
//thisProvince.options[i+1] = new Option(ObjProvinceArray[i] , ObjProvinceArray[i]);
if(ObjProvinceArray[i] == strProvince)
{
thisProvince.options[0] = new Option(ObjProvinceArray[i] , ObjProvinceArray[i]);
thisProvince.options[0].selected = true;
}
}

if(strProvince != "")
{
for(i = 0; i < ObjProvinceArray.length; i++)
{
if(ObjProvinceArray[i] == strProvince)
{
if(strCity == "")
{
thisCity.options[0] = new Option("地级市" , "");
}
for(var j = 0; j < ObjCityArray[i].length; j++)
{
if(strCity == "")
{
thisCity.options[j + 1] = new Option(ObjCityArray[i][j], ObjCityArray[i][j]);
if(ObjCityArray[i][j] == strCity)
{
thisCity.options[j + 1].selected = true;
}
}
else
{
if(ObjCityArray[i][j] == strCity)
{
thisCity.options[0] = new Option(ObjCityArray[i][j], ObjCityArray[i][j]);
thisCity.options[0].selected = true;
}
}
}
}
} }

if(strCity != "")
{
for(i = 0; i < ObjCityArray.length; i++)
{
for(j = 0; j < ObjCityArray[i].length; j++)
{
if(ObjCityArray[i][j] == strCity)
{
if(strCounty == "")
{
thisCounty.options[0] = new Option("不限" , "不限");
}
for(var k = 0; k < ObjCountyArray[i][j].length; k++)
{
if(strCounty == "" || strCounty == "不限")
{
thisCounty.options[k + 1] = new Option(ObjCountyArray[i][j][k], ObjCountyArray[i][j][k]);
if(ObjCountyArray[i][j][k] == strCounty)
{
thisCounty.options[k + 1].selected = true;
}
}
else
{
if(ObjCountyArray[i][j][k] == strCounty)
{
thisCounty.options[0] = new Option(ObjCountyArray[i][j][k], ObjCountyArray[i][j][k]);
thisCounty.options[0].selected = true;
}
}
}
}
}
}
}
}function SelChgCity(ObjCityField , ProvinceValue , ObjProvinceArray , ObjCityArray , ObjCountyField)
{
var thisCityField = document.getElementById(ObjCityField);
var thisCountyField = document.getElementById(ObjCountyField);
for(var i = thisCityField.length; i > 0; i--)
{
thisCityField.remove(i);
}
for(var i = thisCountyField.length; i > 0; i--)
{
thisCountyField.remove(i);
}
thisCityField.options[0] = new Option("地级市" , "");
thisCountyField.options[0] = new Option("不限" , "不限");
if(ProvinceValue != "")
{
for(i = 0; i < ObjProvinceArray.length; i++)
{
if(ObjProvinceArray[i] == ProvinceValue)
{
for(var j = 0; j < ObjCityArray[i].length; j++)
{
thisCityField.options[j + 1] = new Option(ObjCityArray[i][j], ObjCityArray[i][j]);
}
}
} }
}function SelChgCounty(ObjCountyField , CityValue , ObjCityArray , ObjCountyArray)
{
var thisCountyField = document.getElementById(ObjCountyField);
for(var i = thisCountyField.length; i > 0; i--)
{
thisCountyField.remove(i);
}
thisCountyField.options[0] = new Option("不限" , "不限");
if(CityValue != "")
{
for(i = 0; i < ObjCityArray.length; i++)
{
for(var j = 0; j < ObjCityArray[i].length; j++)
{
if(ObjCityArray[i][j] == CityValue)
{
for(var k = 0; k < ObjCountyArray[i][j].length; k++)
{
thisCountyField.options[k + 1] = new Option(ObjCountyArray[i][j][k], ObjCountyArray[i][j][k]);
}
}
}
} }
}

解决方案 »

  1.   

    另外，还有职位二级联动菜单一样，请问该如何修改js核心代码？
    <script language="javascript" src="Job_All.js"></script>
    <script language="javascript" src="Job_Function.js"></script><select name="Position_b" id="Position_b" onChange="SelectChange('Position_s' , document.all.Position_b.options[document.all.Position_b.selectedIndex].value , arrPosition_b , arrPosition_s);">
    <option value="">-请选择工作职能-</option>
    </select>
    <select name="Position_s"  id="Position_s">
    <option value="">-请选择工作职位-</option>
    </select>Job_All.js
    var arrPosition_b = new Array();
    var arrPosition_s = new Array();var i = 0;
    var j = 0;arrPosition_b[i] = "大类";
    arrPosition_s[i] = new Array(); j = 0;
    arrPosition_s[i][j++] = new Array("职位1" , "职位1");
    arrPosition_s[i][j++] = new Array("职位11" , "职位1"1);
    arrPosition_s[i][j++] = new Array("其他" , "其他");i++;Job_Function.js
    // JavaScript Documentfunction SelectChange(ObjChildField , ParentValue , ObjParentArray , ObjChildArray)
    {
    var thisField = document.getElementById(ObjChildField);
    //alert(thisField .options.value);
    for(var aa = thisField.length; aa > 0; aa--)
    {
    thisField.remove(aa);
    }
    thisField.options[0] = new Option("-选择工作职位-" , "");
    if(ParentValue != "")
    {
    for(aa = 0; aa < ObjParentArray.length; aa++)
    {
    if(ObjParentArray[aa] == ParentValue)
    {
    thisField.options[1] = new Option(ObjParentArray[aa]+"-不限" , "不限");
    for(var ii = 0; ii < ObjChildArray[aa].length; ii++)
    {
    thisField.options[ii + 2] = new Option(ObjChildArray[aa][ii][0], ObjChildArray[aa][ii][1]);
    }
    }
    } }
    }
    function InitPosition(ObjPosition_bField , ObjPosition_sField , ObjArray_b , ObjArray_s , str_b , str_s)
    {
    var thisField_b = document.getElementById(ObjPosition_bField);
    var thisField_s = document.getElementById(ObjPosition_sField);

    thisField_b.options[0] = new Option("-选择工作职能-" , "");
    for(var i = 0; i < ObjArray_b.length; i++)
    {
    thisField_b.options[i+1] = new Option(ObjArray_b[i] , ObjArray_b[i]);
    if(ObjArray_b[i] == str_b)
    thisField_b.options[i+1].selected = true;
    }

    thisField_s.options[0] = new Option("-选择工作职位-" , "");
    if(str_b != "")
    {
    for(i = 0; i < ObjArray_b.length; i++)
    {
    if(ObjArray_b[i] == str_b)
    {
    thisField_s.options[1] = new Option(ObjArray_b[i]+"-不限" , "不限");
    if(str_s == "不限")
    thisField_s.options[1].selected = true;
    for(var ii = 0; ii < ObjArray_s[i].length; ii++)
    {
    thisField_s.options[ii + 2] = new Option(ObjArray_s[i][ii][0], ObjArray_s[i][ii][1]);
    if(ObjArray_s[i][ii][1] == str_s)
    thisField_s.options[ii + 2].selected = true;
    }
    }
    } }
    }
    请大家帮修改下Area_Function.js以及Job_Function.js，让其在xhtml1.0下兼容IE与FireFox。
      

  2.   

    不过你先别弄联动，先搞清楚JS操作SELECT，在IE和FF下区别何在，如果搞清楚了，我想联动的问题也就解决了。
      

  3.   

    感谢ls的建议
    不过本人比较菜,对js不太熟悉.
      

  4.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>selectOptions3.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
         function madeadd(){
    var madeAdd = document.forms[0].address;
    var madeAdd1 = document.forms[0].address1;
    if(madeAdd.options[0].selected == true){
    madeAdd1.options.length = 0;//删除下面所有的元素
    madeAdd1.options.add(new Option("s", "s"));//添加一个option
    }
             //这样就兼容ff了
    if(madeAdd.options[1].selected == true){
    madeAdd1.options.length = 0;
    madeAdd1.options.add(new Option("武汉", "武汉"));
    madeAdd1.options.add(new Option("黄冈", "黄冈"));
    madeAdd1.options.add(new Option("浠水", "浠水"));
    madeAdd1.options.add(new Option("罗田", "罗田"));
    madeAdd1.options.add(new Option("大冶", "大冶"));
    madeAdd1.options.add(new Option("蕲春", "蕲春"));
    }
    if(madeAdd.options[2].selected == true){
    madeAdd1.options.length = 0;
    madeAdd1.options.add(new Option("长沙", "长沙"));
    madeAdd1.options.add(new Option("南昌", "南昌"));
    }
    }

    window.onload = function () {
    var temp = document.forms[0].address;
    var madeAdd1 = document.forms[0].address1;
    temp.value = "hb";//"之前选择的值";
    if (temp.value == "hb") {
    madeAdd1.options.add(new Option("武汉", "武汉"));
    madeAdd1.options.add(new Option("黄冈", "黄冈"));
    madeAdd1.options.add(new Option("浠水", "浠水"));
    madeAdd1.options.add(new Option("罗田", "罗田"));
    madeAdd1.options.add(new Option("大冶", "大冶"));
    madeAdd1.options.add(new Option("蕲春", "蕲春"));
    }
    if(temp.value == "hn"){
    madeAdd1.options.add(new Option("长沙", "长沙"));
    madeAdd1.options.add(new Option("南昌", "南昌"));
    }
    madeAdd1.value = "蕲春";//第二个文本框选择的值
    };
        
        </script>  </head>
      
      <body>
       <form>
        <select name="address" onchange="madeadd()">
    <option value=""></option>
    <option value="hb">湖北</option>
    <option value="hn">湖南</option>
    </select>
    <select name="address1">
    <option value="">&nbsp;&nbsp;</option>
    </select>
    </form>
      </body>
    </html>