Question

I have a list:

<select id = "opt">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

lets do this:

alert (document.getElementById('opt').innerHTML);

it will print that:

<select id = "opt"><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>

no problem yet. Now I change the selected item:

for (var count = 0; count < document.getElementById('opt').childNodes[0].options.length; count++)
{
 if (document.getElementById('opt').childNodes[0].options[count].value == 'b') { document.getElementById('opt').childNodes[0].options[count].selected = true; break; }
}

and print it again:

alert (document.getElementById('opt').innerHTML);

it again will print:

<select id = "opt"><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>

but I excepted something like that!

<select id = "opt"><option value="a">a</option><option value="b" **selected="selected"**>b</option><option value="c">c</option></select>

so .innerHTML doesnt follow the changes. How to fix it?

Answer 1

What you see is the difference between properties and attributes. The selected attribute is copied into the selected property when the element is created. You are changing the property, but that doesn’t change the attribute.

You can see the difference between setting the property and the attrute here:

http://jsfiddle.net/Guffa/Pec9j/