Блог

Главная - Вопросы по программированию - Выпадающий список не закрывается при выборе (javascript)

Выпадающий список не закрывается при выборе (javascript)

#javascript #html #list #button #dropdown

#javascript #HTML #Список #кнопка #выпадающий список

Вопрос:

Я пытаюсь создать несколько выпадающих списков на одной странице, которые выбирают переключатели на основе выбора из этого выпадающего списка.

Он работает наполовину, переключатель меняется в зависимости от выбора, однако я не могу заставить выпадающий список закрыть и сохранить селектор при выборе. Интересно, связано ли это с JS-скрипкой ниже

Скрипка: https://jsfiddle.net/8b069fj2 /

 $("input").on("change", function () {
  var inputName = this.name;
  $("#select-'   inputName   '-btn").html(this.checked ? this.value : "");
});

$(".js-option").on("click", function () {
  $(this).parent().find("ul").toggleClass("js-drop");
});

Ответ №1:

вы отправляете обработчик щелчков для элементов списка, поэтому для меня сработало следующее:

 $('input').on('change', function() {
  var inputName = this.name;
  console.log(inputName);
  var selector = '#select-'   inputName   '-btn';
  $(selector).html(this.checked ? this.value : '');
});

$('.js-option').on('click', function() {
  $(this).parent().find('ul').toggleClass("js-drop");
});

  $('li .js-option').on('click',function(){
    $(this).closest('ul').toggleClass("js-drop");
  })

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

1. Спасибо! При этом выбирается только первый вариант, а 2-й выпадающий список не работает

2. ya это просто показывает, как его закрыть. действительно, вам нужно больше кода, чтобы закрыть их динамически. Обновлю свой ответ, как только у меня будет больше времени.

3. Удивительно! Тем временем я попытаюсь разобраться с этим сам … вероятно, безрезультатно!

4. Хорошо, просто обновил ответ, который, похоже, работает

Метки: