Select Option Change Using DOM

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?