在下拉字段中选择一个值,然后在多选字段中预先选择值

时间:2019-04-10 21:38:40

标签: javascript

我有两个领域。我正在动态获取每个字段的值。我无法对任何数据进行硬编码,因为它在变化。

使用javascript,我想通过第一个单选下拉列表选择一个值。点击后,我要第二个更新匹配的ID。

ex(再次动态获取值)

字段1-单选下拉列表 名称(显示的文字)-ID(提交的值) 水果-1 蔬菜-2 糖果-3 肉类-4

字段2-多个教派列表框 名称(显示的文字)-ID(提交的值) 苹果-1 胡萝卜2 冰淇淋-3 汉堡包-4 橙色-1 牛排-4 巧克力3 树莓-1

所需结果: 如果用户从字段1中选择“水果” 那么字段2应该预先选择苹果,橙子,覆盆子(因为它们的ID均为1)

我正在c#Page_Init中从salesforce动态提取数据 数据绑定到字段

<asp:Panel CssClass="form-group" runat="server">
<label id="Field1" class="control-label" for="Field2" runat="server">
<asp:DropDownList ID="Field1" ClientIDMode="Static" 
onchange="myFunction(event)" CssClass="form-control" runat="server" />

<asp:Panel CssClass="form-group" runat="server">
<label id="field2" class="control-label" for="field2" runat="server"> 
</label>
<asp:ListBox ID="field2" CssClass="form-control" SelectionMode="Multiple" 
ClientIDMode="Static" runat="server" />
</asp:Panel>

<script type="text/javascript">
function myFunction(e) {
        document.getElementById("field2").value = e.target.value
    }
 </script>

当我刚刚更新单个选择下拉字段时,我最初有这个jQuery。仍然选择1个值,而不是所有具有匹配ID的值

1 个答案:

答案 0 :(得分:0)

我最终查找了一个类似的请求,并将其编辑为不是硬编码的动态值

<select name='field1' id="field1">
<option value="1">Fruits</option>
<option value="2">Vegetables</option>
<option value="3">Sweets</option>
<option value="4">Meat</option>
</select>

<select name='field2' id="field2" multiple >
<option value="1">Apple</option>
<option value="2">Carrot</option>
<option value="3">Ice Cream </option>
<option value="4">Hamburger</option>
<option value="1">Orange</option>
 <option value="4">Steak </option>
  <option value="3">Chocolate</option>
   <option value="1">Raspberries </option>
 </select>

 var foodsToSelect = $("#field1").val();
 var foods = document.getElementById( 'field2' );

 for ( var i = 0, l = foods.options.length, o; i < l; i++ )
 {
 o = foods.options[i];
 if ( foodsToSelect.indexOf( o.value ) != -1 )
 {
  o.selected = true;
}
}

http://jsfiddle.net/jw8rugse/2/