Javascript 动态 select，使用数组

Question

我有来自一个非常古老的网站的以下代码。它来自用于销售 activity 假期的系统的后端，并且只有在启用兼容模式时才能在 IE 中运行。（因此第 3 行的元标记）。

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=6" />
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function BuildActivityTypeSubTypeDropDown(ActivityTypeId) {

    var ActivitySubTypeId = 0
    var arrActivityTypeId = new Array(2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,35,36,37,38,39,40,41,42,45,46,47,48);
    var arrActivityTypeName = new Array('Adventure','Sport','Culture','Personal Development','Fitness','Wellbeing','Ski','Cycling','Surfing','Tennis','Fishing','Golf','Walking','Languages','Music','Poker','Bridge','Football','Photography','Cooking','Painting','Airborne','Wine','Cricket','Scrabble','Chess','Mountains','Diving','Kayaking','Windsurfing','Sailing','Riding','Singing','Farming','Creative Writing','Croquet','Drama','Bowls','Motorcycle','Wildlife','Incentive','Spice','Comedy','Boot Camp');
    var arrActivitySubTypeId = new Array(190,16,77,12,32,30,99,104,14,112,18,28,34,98,89,97,15,17,170,78,35,74,196,13,109,6,108,68,21,207,95,37,11,110,191,111,90,40,63,43,85,59,65,69,120,169,200,189,202,173,172,216,175,178,136,199,198,176,171,195,197,179,192,168,194,177,205,180,100,181,103,101,162,102,114,119,115,118,116,117,121,122,124,123,186,125,187,126,152,153,131,127,128,130,129,135,133,201,183,132,134,137,138,140,182,139,141,142,144,164,145,143,146,147,148,149,150,151,154,155,156,209,157,213,208,214,211,212,210,158,184,159,160,167,161,163,165,166,203,204,215,193);
    var arrActivitySubTypeName = new Array('Canyoning','Multi-Activity','Golf','Archaeology','Cooking','Sightseeing','Wine','Outdoor Survival skills','Public Speaking','Aerobics','Bachata','Belrobics','Bollywood Fitness','Booiaka','Boot Camp','Boxfit','Drums Alive','Fitness','Ginastica Natural','Insanity','Kettlebell Workout','Masala Bhangra','Parkour','Personal Training','Pilates','Retreat','Running','Spa','Step Aerobics','Weight Loss','Yoga','Zumba','Nutrition','Pilates','Spa','Weight-Loss','Yoga','Alpine and Downhill','Cross-Country','Snowboarding','Cycle Touring','Mountain Biking','Road Cycling','Surfing','Tennis','Big Game','Carp','Fly','Salmon','Trout','Golf','Hiking','Rambling','Walking','French','German','Italian','Spanish','Classical Concerts','Groups - live concerts','Learn to play','stud','Texas Hold \'em','Bridge','Football','Photography','Baking','Breadmaking','Cooking','Painting','Ballooning','Gliding','Hang-Gliding','Light Aircraft','Para-Gliding','Wine','Cricket','Scrabble','Chess','Climbing and mountaineering','Hiking','Diving','Kayaking','Windsurfing','Bareboat Charter','Big Boat','Cabin Charter','Dinghy','Expedition Adventure Sailing','Flotilla Sailing Holidays','RYA Training Holidays','Skippered Charter','Horseriding','Choral','Urban Farming','Writing','Croquet','Acting and Drama','Bowls','Track days','Birdwatching','Various','Various','Carry on Comedy','Boot Camp');
    var arrActivitySubTypeActivityTypeId = new Array(2,2,3,4,4,4,4,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,8,8,8,9,9,9,10,11,12,12,12,12,12,13,14,14,14,15,15,15,15,16,16,16,17,17,18,19,20,21,21,21,22,23,23,23,23,23,24,25,26,27,28,28,29,30,31,32,32,32,32,32,32,32,32,33,35,36,37,38,39,40,41,42,45,46,47,48);

    var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeId')
    var ActivitySubTypeDropDownOption

    ActivitySubTypeDropDown.options.length = 0;

        ActivitySubTypeDropDownOption = document.createElement("OPTION");
        ActivitySubTypeDropDownOption.value = '';
        ActivitySubTypeDropDownOption.text = '';
        ActivitySubTypeDropDown.add(ActivitySubTypeDropDownOption);

        for(var i = 0; i < arrActivitySubTypeId.length; ++i) {
            if (arrActivitySubTypeActivityTypeId[i] == ActivityTypeId) {

                ActivitySubTypeDropDownOption = document.createElement("OPTION");
                ActivitySubTypeDropDownOption.value = arrActivitySubTypeId[i];
                ActivitySubTypeDropDownOption.text = arrActivitySubTypeName[i];
                ActivitySubTypeDropDown.add(ActivitySubTypeDropDownOption);
                    if (arrActivitySubTypeId[i] == ActivitySubTypeId) {
                        ActivitySubTypeDropDownOption.selected = true;
                    }
            }
        }
}

//  End -->
</script>

<center>
<form name="frmBookings">

    Activity Category<br>

    <select id="ActivityTypeDropDown" name="ActivityTypeId" style="width: 100px" OnChange="BuildActivityTypeSubTypeDropDown(this.value)">
        <option value="">Select All</option>
        <option value=""></option>
        <option value="2" >Adventure</option>
        <option value="23" >Airborne</option>
        <option value="48" >Boot Camp</option>
        <option value="40" >Bowls</option>
        <option value="18" >Bridge</option>
        <option value="27" >Chess</option>
        <option value="47" >Comedy</option>
        <option value="21" >Cooking</option>
        <option value="37" >Creative Writing</option>
        <option value="25" >Cricket</option>
        <option value="38" >Croquet</option>
        <option value="4" >Culture</option>
        <option value="9" >Cycling</option>
        <option value="29" >Diving</option>
        <option value="39" >Drama</option>
        <option value="36" >Farming</option>
        <option value="12" >Fishing</option>
        <option value="6" >Fitness</option>
        <option value="19" >Football</option>
        <option value="13" >Golf</option>
        <option value="45" >Incentive</option>
        <option value="30" >Kayaking</option>
        <option value="15" >Languages</option>
        <option value="41" >Motorcycle</option>
        <option value="28" >Mountains</option>
        <option value="16" >Music</option>
        <option value="22" >Painting</option>
        <option value="5" >Personal Development</option>
        <option value="20" >Photography</option>
        <option value="17" >Poker</option>
        <option value="33" >Riding</option>
        <option value="32" >Sailing</option>
        <option value="26" >Scrabble</option>
        <option value="35" >Singing</option>
        <option value="8" selected>Ski</option>
        <option value="46" >Spice</option>
        <option value="3" >Sport</option>
        <option value="10" >Surfing</option>
        <option value="11" >Tennis</option>
        <option value="14" >Walking</option>
        <option value="7" >Wellbeing</option>
        <option value="42" >Wildlife</option>
        <option value="31" >Windsurfing</option>
        <option value="24" >Wine</option>
    </select>
<br><br>
Activity Type<br>
    <select id="ActivitySubTypeDropDown" name="ActivitySubTypeId" style="width: 100px">
    </select>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
    BuildActivityTypeSubTypeDropDown(8);
//  End -->
</script>
<br><br>
<input type="submit" value="Search Bookings" class="button">
</form>
</body>
</html>

我正在寻找使其在当前桌面版本的 Edge、Firefox 和 Chrome 中运行所需的最小更改。

我应该补充一点，这是 HTML 输出。第 11 行到第 15 行的数组内容是从带有服务器端代码的数据库中提取的，因此如果可能的话，我正在寻找一个继续使用这些数组的答案。

当我删除兼容性元标记时，我收到第 20 行的以下错误警报：

"Unable to get property "未定义或空引用的选项"。

有人能帮忙吗？

Answer 1

没有 ID 为 ActivitySubTypeId 的元素。你应该改变

var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeId')

至

var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeDropDown')

Answer 2

为@Titus 的回答添加更多信息：

从 MS documentation 你可以看到

In IE7 Standards mode and previous modes, this method performs a case-insensitive match on both the ID and NAME attributes, which might produce unexpected results. For more information, see Defining Document Compatibility.

因此强制使用 兼容模式 该代码由于 name 属性而工作，但任何现代浏览器都只检查 id 属性的值，正如预期的那样.

Answer 3

你应该需要改变这个，它也会在其他浏览器中给出错误

var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeId')

至

var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeDropDown');

Javascript 动态 select，使用数组

Javascript dynamic select, using arrays

javascript

cross-browser