Select option change using DOM

[Manish Tomar]

Hi All,

As far as my understanding of HTML DOM aka DHTML goes, is that if the
DOM structure of HTML document is changed programmatically using
JavaScript in the browser, it immediately gets reflected in the page's
view. For example, if following code is executed on say a click of a
button

var f = document.getElementById("f1"); // f1 is id of a form
var i = document.createElement("input");
i.setAttribute("type", "text");
f.appendChild(i);

the page immediately shows the new textbox under that form. But in the
following code, this doesnt happen.

<form id="f1">
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<script>
// Gets executed say on click of some button
var c = document.getElementById("cars");
c.options[1].setAttribute("selected", "selected"); // doesnt work
c.options[1].selected = true; // works
</script>

the option in combo box remains same. I checked in Firebug that the
attribute is added properly. Using the selected attribute works. Why
so?

Thanks in advance,
Manish

 

[Cah Sableng]

<form id="f1">
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<script>
// Gets executed say on click of some button
var c = document.getElementById("cars");
c.options[1].setAttribute("selected", "selected"); // doesnt work

c.selectedIndex = 1;


Pasted from W3C's DOM2-HTML Specification:
<url http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70874476>

Interface HTMLOptionElement

selected of type boolean
Represents the current state of the corresponding form control, in an
interactive user agent. Changing this attribute changes the state of
the form control, but does not change the value of the HTML selected
attribute of the element.

HTH

 

[Manish Tomar]

Thanks I checked it out at given link. defaultSelected property
represents the html "selected" attribute and doesn't help in changing
the control.

<form id="f1">
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<script>
// Gets executed say on click of some button
var c = document.getElementById("cars");
c.options[1].setAttribute("selected", "selected"); // doesnt work

c.selectedIndex = 1;

Pasted from W3C's DOM2-HTML Specification:
<urlhttp://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70874476>

Interface HTMLOptionElement

selected of type boolean
Represents the current state of the corresponding form control, in an
interactive user agent. Changing this attribute changes the state of
the form control, but does not change the value of the HTML selected
attribute of the element.

HTH