Can't access the option value using javascript on Internet Explorer

Question

I have the following setup

"<form name=\"mylimit\" style=\"float:left\">
                <select name=\"limiter\" onChange=\"limit()\">
                <option selected=\"selected\">&nbsp;</option>"; ...

I wrote a js script to access the selected value of the selectField 'limiter' like so:

 var w = document.mylimit.limiter.selectedIndex;

var url_add = document.mylimit.limiter.options[w].value;

//On every browser i get the expected value except on Internet Explorer. think IExplorer dont like the bolded portion above. Any clue?

Answer 1

Did you try out one of these

document.mylimit.limiter.options[document.mylimit.limiter.selectedIndex].value

or

document.getElementById('limiter').options[document.getElementById('limiter').selectedIndex].value

This should help I think

Answer 2

document.getElementById("limiter").value works as well.

Answer 3

IE is looking for the value attribute. It looks like other browsers are defaulting to the text displayed as the value if value="" is not found on the option tag. The following is what works on all major browsers.

<form name="mylimit" style="float:left">
    <select name="limiter" onChange="limit()">
        <option selected="selected" value='foo'>bar</option>
    </select>
</form>

<script>
    var index = document.mylimit.limiter.selectedIndex;
    var value = document.mylimit.limiter.options[index].value;
    alert(value); // Alerts 'foo'
</script>

This way you can have a seperate value and display for each option.