Hi
Sorry about the heading.
I have a table with td consisting of lists with <select></select>. When
I do a document.getElementById("element").innerHTML I don't see the
selected item. IOW, the innerHTML is not dynamic.
There is no specification for how innerHTML works, it is not a
standard. Many browsers implement it but only through reverse
engineering of Microsoft's implementation (or perhaps their own
version of what they thing Microsoft's should do). Therefore
expecting it to have any particular behaviour is wishful thinking,
though it has been implemented reasonably consistently as far as I
know.
The following is therefore pure speculation based on observation.
innerHTML reflects the current HTML of the element. The 'selected'
attribute of an option sets the *default* selected element, it does
not necessarily reflect the currently selected element.
The user selecting an option does not change the default selected
element, therefore the innerHTML of the select does not change. If
you change an element - say using DOM methods - then the innerHTML is
modified.
Is there some way to
get the most recent selected without traversing through the list's
options.
The value of the currently selected option, in some browsers, can be
accessed by getting the select's value. However, some browsers
don't support that and you must use the 'selectedIndex' property.
For multiple selects, you must iterate through the options to find
the selected items.
It would be nice if there was a 'getSelectedOptions' method that
returned an array of the selected options, but alas, there ain't.
<script type="text/javascript">
function showValue( b ) {
var f = b.form;
var sel = f.elements['sel0'];
alert(sel.value);
alert(sel[sel.selectedIndex].value);
}
</script>
<form action="">
<select name="sel0">
<option value="option 0" selected>Option 0</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3</option>
</select>
<input type="button" value="Show value..." onclick="
showValue(this);
">
</form>
