Select option change using DOM

Discussion in 'Javascript' started by Manish Tomar, Apr 16, 2007.

  1. Manish  Tomar

    Manish Tomar Guest

    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
    Manish Tomar, Apr 16, 2007
    #1
    1. Advertising

  2. Manish  Tomar

    Cah Sableng Guest

    On Apr 17, 12:09 am, "Manish Tomar" <> wrote:

    > <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
    Cah Sableng, Apr 17, 2007
    #2
    1. Advertising

  3. Manish  Tomar

    Manish Tomar Guest

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

    On Apr 17, 6:02 am, Cah Sableng <> wrote:
    > On Apr 17, 12:09 am, "Manish Tomar" <> wrote:
    >
    > > <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
    Manish Tomar, Apr 17, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. J. Hall
    Replies:
    2
    Views:
    1,039
    Jeff Thies
    Apr 21, 2004
  2. John Grandy

    <select> <option> an element in DOM ?

    John Grandy, May 11, 2007, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    160
    Teemu Keiski
    May 11, 2007
  3. Robert Oschler
    Replies:
    1
    Views:
    119
    Robert Oschler
    Sep 3, 2005
  4. WebRaster
    Replies:
    1
    Views:
    258
    Francisco Spaeth
    Oct 26, 2005
  5. Nick Spacek

    Removing select option removes entire select

    Nick Spacek, Jun 21, 2006, in forum: Javascript
    Replies:
    1
    Views:
    141
    Matt Kruse
    Jun 21, 2006
Loading...

Share This Page