Блог

Главная - Вопросы по программированию - jQuery добавить выбранное в опцию после публикации данных

jQuery добавить выбранное в опцию после публикации данных

#javascript #jquery

#javascript #jquery

Вопрос:

Я добавляю json данные option data-values в действие, когда я нажимаю option , мой код jQuery добавляет data-values данные в список опций при #target использовании JSON.parse , each , и append методов.

 $('#list').change(function() {
  var response = JSON.parse($(this).find(':selected').attr('data-values'));
  var len = response.length;
  $("#target").empty();
  $.each(response, function() {
    $.each(this, function(name, value) {
      $("#target").append("<option value='"   name   "'>"   value   "</option>");
    });
  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="list">
  <optgroup label="Hardware">
    <option value="5" data-values='[{"34":"500GB","35":"1TB","36":"2TB","37":"4TB"}]'>
      HDD
    </option>
    <option value="11" data-values='[{"63":"Ardreno 650","64":"Adreno 640","65":"NVIDIA GeForce GTX 1650","66":"NVIDIA GeForce GTX 1080","67":"NVIDIA GeForce GTX 2070","68":"NVIDIA GeForce GTX 2080"}]' selected="selected">
      Graphics
    </option>
  </optgroup>
</select>

<select id="target"></select>

Теперь в create page моем коде все работает верно, но у меня большая проблема с отправкой обратно. Когда я отправляю данные на свой php контроллер, а мой контроллер возвращает любую ошибку, мне нужно добавить old данные выбора (отправить данные) в #target список. На самом деле мне нужно автоматически загружать #target список при загрузке страницы, если #list опция есть selected , и добавлять selected в #target список опций.

Отработанная демонстрация

Не работает демо (добавить выбранное в опцию)

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

1. Зачем вообще использовать data attr. Просто создайте объект, ключ которого соответствует значению параметра

2. Просто добавьте $('#list').change(); . Пример . Однако это не приведет к повторному выбору выбранного параметра во втором раскрывающемся списке.

3. $('#list').on("change",function() { ... }).change();

4. Затем вам нужно установить значение или SelectedIndex с помощью localStorage, если вы не можете установить его на объекте с сервера

5. Что-то вроде const data = { "5": [{"34":{ "500GB", "selected":true},{"35":"1TB"},{"36":"2TB"},{"37":"4TB"}}]

Ответ №1:

Попробуйте это: $('#list').trigger('change');