Получить все выбранные значения всех меню выбора и выходные значения в неупорядоченном списке

#javascript

Вопрос:

На моей странице есть несколько вариантов выбора, и я установил одну и ту же функцию onchange для всех меню выбора следующим образом:

 <select onchange="myResultsFunction()">
  <option></option>
  <option></option>
</select>

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

 <div id="selected-results">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Итак, мне нужна помощь с фактической функцией, потому что я не знаю, как идти дальше. Моя функция начинается с получения идентификатора div, в котором я хочу отобразить неупорядоченный список результатов. Но как мне идти дальше? Потому что я предполагаю, что мне нужно вывести его с помощью цикла или чего-то еще, чтобы я мог создать список результатов? И как мне на самом деле получить выбранное значение в выпадающих списках?

 function myResultsFunction() {
document.getElementByID("selected-results");
}

Ответ №1:

 var selects = document.querySelectorAll("select.custom_component_option_select");
// get all selelct elements with class  .custom_component_option_select


var list = document.querySelector("#selected-results > ul");
//get list, ul element

selects.forEach(select => {
//for each select element
  select.addEventListener('change', event => {
  // add event Listener change
    myResultsFunction()
    // on change call function
  })
})


function myResultsFunction() {
  list.innerHTML = "";
// on change empty the list 
  selects.forEach(select => {
// for each select 

    if ((select.options[select.selectedIndex].text !== "...") === true) {
    // if selcted value is not ... , feel free to edit his
      var li = document.createElement("li");
      // creat new li
      li.innerHTML = select.options[select.selectedIndex].text;
      // add value to it
      list.appendChild(li);
      // add to list
    }
  })
}

 <select class="custom_component_option_select">
  <option selected value="test">...</option>
  <option value="test">1-1</option>
  <option value="test">1-2</option>
</select>

<select class="custom_component_option_select">
  <option selected value="test">...</option>
  <option value="test">2-1</option>
  <option value="test">2-2</option>
</select>

<select class="custom_component_option_select">
  <option selected>...</option>
  <option value="test">3-1</option>
  <option value="test">3-2</option>
</select>


<div id="selected-results">
  <ul>

  </ul>
</div>

1. @Shtarley Перед вами рабочее решение. Это работает так, как я это сделал. И вам ни для чего не нужны циклы. Это можно сделать, зациклив все выбранные значения элементов и сопоставив их, и создавая каждый раз новый список с самого начала. Это более простой и простой способ, которым я это сделал. Перед вами фрагмент рабочего решения с полным объяснением того, как это работает в описании.

2. @Shtarley Внимательно посмотрите на сниппет, сравните его с вашим кодом. Проверьте свою консоль. журнал ошибок java-скрипта. боюсь, что «похоже, не работает» для меня ничего не значит. Это работает так, как вы видите перед собой. Вам нужно дать мне что-то для работы, какую-то ошибку или полный рабочий код, чтобы сравнить его…

3. @Shtarley Это вообще не упоминалось, сейчас я обновлю функцию. Сколько у вас выборок? и есть ли у них какие-то идентификаторы, классы?

4. @Shtarley Что это за класс? И да, в этом случае мы создадим цикл…

5. @Shtarley Я немного изменил код и добавил к нему комментарии, теперь я спешу выйти, но все должно быть ясно из комментариев в коде. Сделайте мне массаж, я могу настроить его позже, приветствия.