Javascript – Can’t access the option value using javascript on Internet Explorer

htmlinternet-explorerjavascriptselect

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?

Best Solution

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.