Javascript dynamic select, using arrays

Question

I have the following code from a very old website. It's from the back end of a system which is used to sell activity holidays, and it only works in IE when Compatibility Mode is engaged. (Hence the meta tag on line 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>

I'm looking for the most minimal changes necessary to get it to work in current desktop versions of Edge, Firefox and Chrome.

I should add that this is HTML output. The contents of the arrays on lines 11 to 15 are pulled from a database with server side code, so if possible I'm looking for an answer which continues to use these arrays.

When I remove the compatibility meta tag I get the following error alert for line 20:

"Unable to get property "options" of undefined or null reference".

Can anyone help?

Titus · Accepted Answer · 2017-05-15 14:10:14Z

2

There is no element with ID ActivitySubTypeId. You should change

var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeId')

to

var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeDropDown')

answered May 15, 2017 at 14:10

Titus

22.6k1 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pablo Lozano · Accepted Answer · 2017-05-15 14:14:04Z

2

Adding more information to @Titus' answer:

From MS documentation you can see that

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.

So forcing the compatibility mode that code works because of the name attribute, but any modern browser checks just the id attribute's value, as expected.

answered May 15, 2017 at 14:14

Pablo Lozano

10.4k2 gold badges43 silver badges64 bronze badges

Comments

Praveen Rawat · Accepted Answer · 2017-05-15 14:19:36Z

1

You should need to change this, it will also give the error in other browsers

var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeId')

to

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

answered May 15, 2017 at 14:19

Praveen Rawat

7342 gold badges12 silver badges30 bronze badges

1 Comment

John Over a year ago

Thanks. I've given Titus the "win" because he got there before you, but thanks for taking the time to answer it.

Collectives™ on Stack Overflow

Javascript dynamic select, using arrays

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related