Can't get Select box value in IE using JavaScript

I'm trying to get the value of a select box开发者_开发技巧 using JavaScript. This works in Firefox, Chrome and IE9 but not IE6,7,8. It works if i use jQuery's val(), but i'm trying to get the value using vanilla JavaScript. Why is this not working'.

$('#get').click(function() {
    var x = document.getElementById('bbb').value;//works if i do $('#bbb').val()
    alert(x)
})

Check http://jsfiddle.net/s7YAN/25/

Looking at the jQuery source code, you notice that for .val(), they get the value of <select /> elements by getting the value of the selected <option /> element. The code for the <option /> value-getter is as follows:

function( elem ) {
    // attributes.value is undefined in Blackberry 4.7 but
    // uses .value. See #6932
    var val = elem.attributes.value;
    return !val || val.specified ? elem.value : elem.text;
}

So the key is that they get the option element's text property if the value one is not truthy. This is key because in your example, the <option /> elements don't have a value attribute. So if your options were

<option value="xyz">xyz</option>
<option value="abcdx">abcdx</option>

it would work. It works in other browsers, even without the value attribute, because the spec says that the value property should default to the same as the textContent property. But IE didn't implement that aspect of the spec until version 9, and only filled the value property from the value attribute.

To make your code work like you expect, without changing the markup, you should do it as in my revised version of your jsFiddle:

$('#get').click(function() {
    var bbbEl = document.getElementById('bbb');
    var selectedOptionEl = bbbEl.options[bbbEl.selectedIndex];
    var x = selectedOptionEl.value || selectedOptionEl.text;
    alert(x);
});

(Note that you shouldn't use textContent, like the spec says, because IE6 at the very least didn't implement textContent at all, just text. So you might have a mismatch, if you rely on the difference between them, viz. that text is "Same as textContent, except that spaces are collapsed.")

Try:

var list = document.getElementById('bbb');
var x = list.options[list.selectedIndex].value;

Try the following, (assume for the code below that you put the result of getElementById into sel_node)

var select_data ={index:0, value:""}; 
select_data.index = sel_node.selectedIndex;
select_data.value = sel_node.options[select_data.index].value;

I just took this out of some old code of mine that I wrote that at the time had to work in FF or IE6. I assume this somewhat convoluted approach is what it took to work in IE6. You could probably simplify this, in my code I wanted to return the select_data object. I thought rather than rewrite it, I would just cut and paste the known working version.

(moving a comment up here for better formatting)

var select_node = document.getElementById('bbb');
var the_value = select_node.options[select_node.selectedIndex].value;

now the_value has what you want. My answer is the same as the other answer (it wasn't there when I posted or I wouldn't have bothered). All I can tell you is the code I posted is the code I used and it worked on IE6. If this doesn't work, step through with a debugger and let us know what you see for options[select_node.selectedindex]