Question

In code-behind I can do this to select something:

// Select item in first DropDownList
myCascadingDropDown_1.SelectedValue = itemValue_1+":::"+itemText_1;

// Select item in second DropDownList
myCascadingDropDown_2.SelectedValue = itemValue_2+":::"+itemText_2;

How can I do this in JavaScript?

(I’m aware, that I could search the list and set the selectedIndex property for each dropdown, but I have many items and i’m very lazy.)

EDIT:

npups answer works: I can select my desired item in the first dropdownlist. The problem is however, that new values based on that selected item (it is a CascadingDropDown, remember?) don’t show in the second dropdown so I can’t select anything there. I would need to somehow invoke the update method of the second dropdown manually: any suggestions?

Answer 1

Check this out:

<select id="foo">
  <option value="bar">bar</option>
  <option value="baz">baz</option>
  <option value="bork">bork</option>
</select>

<script type="text/javascript">
  var selectElem = document.getElementById('foo');
  selectElem.value = 'baz';
</script>

Setting the value of the select element fixes that.

Firefox gets it right even if you just use the tags’ content as values (instead of specifying a value in the option’s value attribute). Not sure about other browsers.

EDIT, more stuff:
So there is some other select (or equivalent) that is updated by some harmonizing function when the first select changes?
Here, i have it in the first select’s onchange. When the selected element is set with this “value-setting” technique, the onchange isn’t triggered. Though, one can call the harmonizing function manually when you change the first select. I show two different ways (both in comments) below.

<select id="foo" onchange="harmonize();">
  <option value="bar">bar</option>
  <option value="baz">baz</option>
  <option>bork</option>
</select>

<select id="foo2">
 <option value="0">This</option>
 <option value="1">That</option>
</select>


<script type="text/javascript">
   var select0 = document.getElementById('foo');
   var select1 = document.getElementById('foo2');
   select0.value = 'baz';
   // alternative 1: call harmonize();
   // alternative 2: call select0.onchange();

   function harmonize() {
     if (select0.value==='baz') {
       select1.value = '1';
     }
     else {
       select1.value = '0';
     }
   }
</script>

I didn’t bother to hide global variables etc. here, but of course that is a good idea.