Select Item In Cascadingdropdown Via Javascript & Invoke Update

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

Solution 1:

I was able to solve this:

1) With npups suggestion I was able to set "myCascadingDropDown_1" to my desired value.

2) Using the

myCascadingDropDown_2.CascadingDropDownBehavior._onParentChange(null, null);

method I was able to force the second dropdown to repopulate based on the new selected value of "myCascadingDropDown_1".

3) I wrote a timer to check periodically if the second dropdown has finished repopulation and set the desired value if it has (again using npups answer)..

Solution 2:

Check this out:

<selectid="foo"><optionvalue="bar">bar</option><optionvalue="baz">baz</option><optionvalue="bork">bork</option></select><scripttype="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.

<selectid="foo"onchange="harmonize();"><optionvalue="bar">bar</option><optionvalue="baz">baz</option><option>bork</option></select><selectid="foo2"><optionvalue="0">This</option><optionvalue="1">That</option></select><scripttype="text/javascript">var select0 = document.getElementById('foo');
   var select1 = document.getElementById('foo2');
   select0.value = 'baz';
   // alternative 1: call harmonize();// alternative 2: call select0.onchange();functionharmonize() {
     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.

Solution 3:

you can also use myCascadingDropDown_2.set_SelectedValue(resultval, resultVal) instead of timer (item3)