Question

I have a HTML page that uses Javascript and it works fine in IE but it’s not quite working in Firefox, Chrome, or Safari. My code dynamically adds data to a dropdown in IE but I’m guessing my syntax isn’t quite right for FF, Chrome, or Safari? In FF, Chrome, Safari the dropdown box only shows the hard coded values and never gets updated in the 3 previously mentioned browsers. Assuming that my array is getting populated correctly in FF or Chrome, then I’m guessing the method I’m using to add data back to the dropdown box isn’t written the way FF or Chrome likes?

<script type="text/javascript">

dojo.require("esri.map");
    dojo.require("esri.tasks.route");
    dojo.require("esri.tasks.query");
var dynamicarray = [];

    queryTask.execute(query, showResults);

function showResults(results) {  //This is where I can add values to dropdown in IE

    var featureAttributes;
    var addoffices = document.getElementById("Office");
    var addrigs = document.getElementById("Rigs");

    for (var i = 0, il = results.features.length; i < il; i++) {
        featureAttributes = results.features[i].attributes;
        for (att in featureAttributes) {

            dynamicarray.push(featureAttributes[att]);
            if (isNaN(featureAttributes[att])) {
                addrigs.options.add(new Option(featureAttributes[att], att));
            }
            if (isNaN(featureAttributes[att])) {
                addoffices.options.add(new Option(featureAttributes[att], att));
            }
        }
     }
    }

function officeval() {


    d = document.getElementById("Office");
    var de = d.options[d.selectedIndex].text;
    addStop(de);                    


    }


 function addStop(evt) {

    var lat;
            var lon;
            var dar;
            for (dar in dynamicarray) {
                if (dynamicarray[dar] == evt) {
                    lon = dynamicarray[dar - 1]; //Get Longitude value
                    lat = dynamicarray[dar - 2]; //Get Latitude value

                    var inPoint = new esri.geometry.Point(lon, lat, map.spatialReference);
                    var stop = map.graphics.add(new esri.Graphic(inPoint, stopSymbol));
                    routeParams.stops.features.push(stop);

                    map.graphics.add(new esri.Graphic(new esri.geometry.Point(lon, lat, map.spatialReference), textSymbol));
                    break;
                }
            }
}
</script>

From: 
<SELECT id="Office" SIZE=0 onchange="officeval()">
<OPTION VALUE="0">
<OPTION VALUE="1"> Some Office
    <OPTION VALUE="2"> Warehouse Yard
</SELECT>

Answer 1

It works only in Internet Explorer as you’re using non-compliant code

use:

try {
    addrigs.options.add(new Option(featureAttributes[att], att), null); // standards compliant; doesn't work in IE
}
catch(ex) {
    addrigs.options.add(new Option(featureAttributes[att], att)) // IE only
}

see http://www.dzone.com/snippets/htmljavascript-select-list