Функция JavaScript onchange не работает

Предполагается, что этот javascript изменит выпадающий HTML-код, а также изменит содержимое соответствующих div. Первый щелчок изменяет раскрывающийся список html, но вы не можете его изменить, а также потеряете небольшую стрелку в раскрывающемся списке, чтобы пользователи знали о ее выпадающем списке. Заполненные флажки не заполняют div, потому что я не знаю, как сделать javascript, чтобы я мог устанавливать / удалять флажки

JAVASCRIPT:

function changeSelection() { var x = document.getElementById("populateSelection").id; if (x == "selectionViews") { document.getElementById("dropdownMenuSelect").innerHTML = "Views"; document.getElementById("populateCheckBoxes").innerHTML = ""; } else { document.getElementById("dropdownMenuSelect").innerHTML = "Tables"; document.getElementById("unpopulateCheckBoxes").innerHTML = ""; } } 

Предполагается, что populateCheckBoxes должен иметь эти флажки, когда установлен переключатель радиостанций, и когда переключатель радиопопуляции CheckBoxes установлен, div будет пустым. У меня этот код еще нет, потому что я считаю, что он должен быть в javascript, но вставка этого явно не работает

  

HTML:

Этот html содержит раскрывающийся список, который должен быть изменен, и 2 divs, которые должны изменить

  
  

вот рабочий код, довольно простой, но работает так же, http://codepen.io/MarkBond/pen/JdOZaw?editors=101 . Кстати, это делается с помощью бутстрапа

Покрывая весь ваш вопрос, я думаю, вы хотите вот так:

Обновлено целое Ответ:

HTML

 
  

Удалено содержимое внутри ul и динамически добавляет его:

  

JS / JQuery

 function changeSelection() { if (document.getElementById("selectionTables").checked) { var x = document.getElementById("dropdownMenuSelect"); var text = "Tables "; text += ""; text += ""; x.innerHTML = text; document.getElementById("populateCheckBoxes").innerHTML = ""; var y = document.getElementById("dropdown-menu"); var text2 = "
  • "; text2 += "Chart 1"; text2 += "
  • "; text2 += "Data 1"; text2 += ""; text += ""; x.innerHTML = text; document.getElementById("unpopulateCheckBoxes").innerHTML = ""; var y = document.getElementById("dropdown-menu"); var text2 = "
  • "; text2 += "Chart 2"; text2 += "
  • "; text2 += "Data 2"; text2 += "

    РАБОЧАЯ: CODEPEN

    Измените свою функцию на эту

     function changeSelection() { if (document.getElementById("selectionViews").checked) { document.getElementById("dropdownMenuSelect").innerHTML = "Views"; document.getElementById("populateCheckBoxes").innerHTML = ""; } else { document.getElementById("dropdownMenuSelect").innerHTML = "Tables"; document.getElementById("unpopulateCheckBoxes").innerHTML = ""; } } 

    Перечитайте эту строку:

     var x = document.getElementById("populateSelection").id; 

    Это довольно бессмысленная логика. Идентификатор элемента, который вы найдете с идентификатором populateSelection , всегда будет populateSelection .

    Вы должны использовать атрибуты value и правильную обработку событий.

    DEMO

     function changeSelection(e) { var x = e.target.value; if (x == "selectionViews") { document.getElementById("dropdownMenuSelect").innerHTML = "Views"; document.getElementById("populateCheckBoxes").innerHTML = ""; } else { document.getElementById("dropdownMenuSelect").innerHTML = "Tables"; document.getElementById("unpopulateCheckBoxes").innerHTML = ""; } } document.getElementById('populateSelection').addEventListener('change', changeSelection);