javascript set selected for select option

Question

I am dynamically generating dropdowns egsomeDropDown0, someDropDown1, someDropDown2 ...etc and write it a div in page . I want to know how can set the "selected" option value to onChange of the drop.

The reason when i add a new drop down via button the value of old one is resetted to "Select one".

Need a onChange which will set the selected value as "Selected" so the selected values stays there.

  <select id="someDropDown0" onChange=setVak(this, this.id)>
    <option value="Select One" selected>Select One</option>
    <option value="12">AB</option>
    <option value="13">CD</option>
    <option value="15">EF</option>
    <option value="20">GH </option>
    <option value="21">IJ </option>
    <option value="22">LM </option>

    </select>





function setval(optionVal, optionId)
{
        var dd = document.getElementById(optionId);
        for (var i = 0; i < dd.options.length; i++) 
        {
            if (dd.options[i].text === optionVal.text) 
            {
                dd.selectedIndex = i;
                break;
            }
        }


}

Please help. Thanks

Answer 1

Setting the defaultSelected property of the appropriate option element to true should do the trick:

       > if (dd.options[i].text === optionVal.text)
       > {

              dd.options[i].defaultSelected = true;

       >      dd.selectedIndex = i;
       >      break;
       >  } 

But make sure you only have one option with it set.

Or did I completely misunderstand the question?

Answer 2

If I got you right and you are adding new options to an existing select box: rather than an some kind of "onchange" behaviour (subtree modification actually), your may want to alter the code that appends new select options.

See these example functions for reference:

http://jsfiddle.net/J6bFS/