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

---

我最初在更新单个select下拉字段时使用了这个jquery。它仍在选择1个值并非所有具有匹配ID的值

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

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

---

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

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

---

嗨，欢迎来到SO。你的问题到底是什么？您已经描述了所需的行为，但没有发布任何代码和错误消息。您尝试了什么，但什么不起作用？您好，Matt，最初我有两个单选下拉列表，并且我能够使用函数myFunctione{document.getElementByIdfield2.value=e.target.value}更新第二个字段，但我必须考虑多个匹配ID。我不知道该怎么做，你能编辑你的问题并发布一个代码示例吗？这样我们就可以更好地了解发生了什么？请包括下拉列表的HTML定义、用于获取数据和更改下拉列表值的JS以及从服务器返回的数据。谢天谢地，这有助于Clarifhi，欢迎来到SO。你的问题到底是什么？您已经描述了所需的行为，但没有发布任何代码和错误消息。您尝试了什么，但什么不起作用？您好，Matt，最初我有两个单选下拉列表，并且我能够使用函数myFunctione{document.getElementByIdfield2.value=e.target.value}更新第二个字段，但我必须考虑多个匹配ID。我不知道该怎么做，你能编辑你的问题并发布一个代码示例吗？这样我们就可以更好地了解发生了什么？请包括下拉列表的HTML定义、用于获取数据和更改下拉列表值的JS以及从服务器返回的数据。谢天谢地，这有助于澄清