Выберите значение в раскрывающемся поле с последующим предварительным выбором значений в поле множественного выбора

#javascript

#javascript

Вопрос:

У меня есть два поля. Я динамически извлекаю значения для каждого поля. Я не могу жестко запрограммировать какие-либо данные, потому что они меняются.

С помощью javascript я хочу выбрать значение с помощью 1-го раскрывающегося списка с одним выбором. по щелчку я хочу, чтобы второй обновлялся с соответствующими идентификаторами.

пример (снова значения извлекаются динамически)

поле 1 — одиночный выбор Имя выпадающего списка (отображается текст) — Идентификатор (отправленное значение) Фрукты — 1 Овощи — 2 Сладости — 3 Мясо- 4

Поле 2 — имя окна списка с несколькими разделами (отображается текст) — Идентификатор (отправленное значение) Яблоко — 1 морковь-2 мороженых — 3 гамбургера- 4 апельсина — 1 Стейк -4 Шоколада- 3 малины -1

Желаемый результат: если пользователь выбирает фрукты из поля 1, то в поле 2 следует предварительно выбрать яблоко, апельсин, малину (потому что все они имеют одинаковый идентификатор 1)

Я динамически извлекаю данные из salesforce в c # Page_Init data, привязывая их к полям

 <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 значение, а не все значения с соответствующими идентификаторами

Комментарии:

1. Привет, и добро пожаловать в SO. В чем именно заключается ваш вопрос? Вы описали желаемое поведение, но не опубликовали ни кода, ни сообщений об ошибках. Что вы пробовали, а что не работает?

2. Привет, Мэтт, изначально у меня было два выпадающих списка с одним выбором, и я смог обновить второе поле с помощью: function myFunction(e) { document.getElementById(«field2»).value = e.target.value }, но мне пришлось учитывать несколько совпадающих идентификаторов. и я не уверен, как это сделать

3. Не могли бы вы отредактировать свой вопрос и опубликовать пример кода, чтобы мы могли лучше понять, что происходит? Пожалуйста, укажите HTML-определение выпадающих списков, JS, используемый для извлечения данных и изменения выпадающих значений, и данные, возвращаемые с сервера. Спасибо

4. надеюсь, это поможет прояснить

Ответ №1:

В итоге я нашел аналогичный запрос и отредактировал его так, чтобы это были динамические значения, а не жестко закодированные

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