通过JavaScript&在CascadingDropDown中选择项目调用更新 [英] 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 DropDownList
myCascadingDropDown_2.SelectedValue = itemValue_2+":::"+itemText_2;

如何使用JavaScript做到这一点?

How can I do this in JavaScript?

(我知道，我可以搜索列表并为每个下拉列表设置selectedIndex属性，但是我有很多项目，而且我很懒.)

(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.)

npups答案有效:我可以在第一个下拉列表中选择所需的项目.但是问题是，基于所选项目的新值(是CascadingDropDown，还记得吗?)没有显示在第二个下拉列表中，因此我无法在其中选择任何内容.我需要以某种方式手动调用第二个下拉菜单的更新方法:有什么建议吗?

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?

推荐答案

检查一下:

<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>

设置select元素的值可以解决此问题.

Setting the value of the select element fixes that.

即使您只是将标签的内容用作值(而不是在选项的value属性中指定值)，Firefox也能正确处理.不确定其他浏览器.

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.

编辑，更多内容:
因此，当第一个选择发生更改时，还有一些其他选择(或等效项)会通过一些协调功能进行更新吗?
在这里，我将其放在第一个选择的onchange中.使用此值设置"技术设置所选元素时，不会触发onchange.虽然，您可以在更改第一选择时手动调用和声功能.我在下面展示了两种不同的方式(均在注释中).

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.

这篇关于通过JavaScript&在CascadingDropDown中选择项目调用更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！