CODEWITHSUNDEEP
javascriptcross-browser
John
John

Reputation: 4663

Javascript dynamic select, using arrays

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?

Upvotes: 1

Views: 703

Answers (3)

Praveen Rawat
Praveen Rawat

Reputation: 734

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');

Upvotes: 1

Pablo Lozano
Pablo Lozano

Reputation: 10342

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.

Upvotes: 2

Titus
Titus

Reputation: 22484

There is no element with ID ActivitySubTypeId. You should change

var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeId')

to

var ActivitySubTypeDropDown = document.getElementById('ActivitySubTypeDropDown')

Upvotes: 2

Related Questions