Javascript раскрывающийся список: Элемент управления javascript выпадающий список

Содержание

Выпадающие списки · Bootstrap v4.6

Посмотреть на GitHub Оригинал

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

Обзор

Выпадающие списки — это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они сделаны интерактивными с помощью включенного плагина JavaScript для выпадающего меню Bootstrap. Они переключаются щелчком, а не при наведении курсора; это намеренное дизайнерское решение.

Выпадающие списки созданы на основе сторонней библиотеки Popper, которая обеспечивает динамическое позиционирование и обнаружение области просмотра. Обязательно включите popper.min.js перед загрузочным JavaScript или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper . Popper не используется для размещения раскрывающихся списков на навигационных панелях, хотя динамическое позиционирование не требуется.

Если Вы создаете наш JavaScript из исходного кода, он требуется util.js.

Доступность

WAI ARIA стандарт определяет фактический виджет role="menu", но это относится к меню, похожему на приложение, которое запускает действия или функции. Меню ARIA могут содержать только элементы меню, элементы меню с флажками, элементы меню с переключателями, группы переключателей и подменю.

С другой стороны, выпадающие списки Bootstrap разработаны как общие и применимы к различным ситуациям и структурам разметки. Например, можно создавать раскрывающиеся списки, содержащие дополнительные входные данные и элементы управления формой, такие как поля поиска или формы входа. По этой причине Bootstrap не ожидает (и не добавляет автоматически) какие-либо атрибуты

role и aria-, необходимые для истинных ARIA.

Авторы должны сами включить эти более конкретные атрибуты.

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

.dropdown-item с помощью клавиш курсора и закрывать меню с помощью клавиши ESC.

Примеры

Оберните переключатель раскрывающегося списка (Вашу кнопку или ссылку) и раскрывающееся меню внутри .dropdown, или другого элемента, объявляющего position: relative;. Выпадающие списки можно запускать из элементов <a> или <button>, чтобы лучше соответствовать вашим потенциальным потребностям.

Одна кнопка

Любой отдельный .btn можно превратить в раскрывающийся список с некоторыми изменениями разметки. Вот как Вы можете заставить их работать с любым элементом

<button>:

<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
  <div>
    <a href="#">Действие</a>
    <a href="#">Другое действие</a>
    <a href="#">Что-то еще здесь</a>
  </div>
</div>

И с элементами <a>:

Ссылка выпадающего списка

<div>
  <a href="#" role="button" data-toggle="dropdown" aria-expanded="false">
    Ссылка выпадающего списка
  </a>
  <div>
    <a href="#">Действие</a>
    <a href="#">Другое действие</a>
    <a href="#">Что-то еще здесь</a>
  </div>
</div>

Самое приятное то, что Вы можете сделать это и с любым вариантом кнопки:

<!-- Example single danger button -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Действие
  </button>
  <div>
    <a href="#">Действие</a>
    <a href="#">Другое действие</a>
    <a href="#">Что-то еще здесь</a>
    <div></div>
    <a href="#">Отдельная ссылка</a>
  </div>
</div>

Раздельная кнопка

Точно так же создайте раскрывающиеся списки с разделенными кнопками с практически такой же разметкой, что и раскрывающиеся списки с одной кнопкой, но с добавлением

. dropdown-toggle-split для правильного интервала вокруг курсора раскрывающегося списка.

Мы используем этот дополнительный класс, чтобы уменьшить горизонтальный padding по обе стороны от курсора на 25% и удалить margin-left, который добавляется для обычных раскрывающихся списков кнопок. Эти дополнительные изменения удерживают курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.

<!-- Пример раздельной кнопки Опасность -->
<div>
  <button type="button">Действие</button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Переключатель выпадающего списка</span>
  </button>
  <div>
    <a href="#">Действие</a>
    <a href="#">Другое действие</a>
    <a href="#">Что-то еще здесь</a>
    <div></div>
    <a href="#">Отдельная ссылка</a>
  </div>
</div>

Размеры

Выпадающие кнопки работают с кнопками всех размеров, включая кнопки по умолчанию и кнопки с разделенным раскрывающимся списком.

<!-- Группы больших кнопок (по умолчанию и разделенные) -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Большая кнопка
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Большая раздельная кнопка
  </button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Переключатель выпадающего списка</span>
  </button>
  <div>
    ...
  </div>
</div>

<!-- Небольшие группы кнопок (по умолчанию и разделенные) -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Маленькая кнопка
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button">
    Маленькая раздельная кнопка
  </button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Переключатель выпадающего списка</span>
  </button>
  <div>
    .  ..
  </div>
</div>

Направления

Выпадающий вверх

Вызвать раскрывающееся меню над элементами, добавив к родительскому элементу .dropup.

<!-- Кнопка выпадающего меню по умолчанию -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Выпадающий вверх
  </button>
  <div>
    <!-- Ссылки раскрывающегося меню -->
  </div>
</div>
<!-- Раздельная кнопка выпадающая вверх -->
<div>
  <button type="button">
    Раздельный выпад вверх
  </button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Переключатель выпадающего списка</span>
  </button>
  <div>
    <!-- Ссылки раскрывающегося меню -->
  </div>
</div>

Выпад вправо

Откройте раскрывающееся меню справа от элементов, добавив .dropright к родительскому элементу.

<!-- Кнопка выпадающего вправо по умолчанию -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Выпадающий вправо
  </button>
  <div>
    <!-- Ссылки раскрывающегося меню -->
  </div>
</div>
<!-- Раздельная кнопка выпадающего вправо по умолчанию -->
<div>
  <button type="button">
    Раздельный выпадающий вправо
  </button>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    <span>Переключатель выпада вправо</span>
  </button>
  <div>
    <!-- Ссылки раскрывающегося меню -->
  </div>
</div>

Выпадающий влево

Активируйте раскрывающиеся меню слева от элементов, добавив .dropleft к родительскому элементу.

<!-- Кнопка выпадающая влево по умолчанию -->
<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Выпадающий влево
  </button>
  <div>
    <!-- Ссылки раскрывающегося меню -->
  </div>
</div>
<!-- Раздельная кнопка выпадающая влево -->
<div>
  <div>
    <button type="button" data-toggle="dropdown" aria-expanded="false">
      <span>Переключатель выпадающего влево</span>
    </button>
    <div>
      <!-- Ссылки раскрывающегося меню -->
    </div>
  </div>
  <button type="button">
    Раздельный выпадающий влево
  </button>
</div>

Пункты меню

Исторически содержимое выпадающего меню должно было быть ссылками, но в версии 4 это уже не так. Теперь Вы можете при желании использовать элементы <button> в раскрывающихся списках вместо просто <a>.

<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Выпадающий вниз
  </button>
  <div>
    <button type="button">Действие</button>
    <button type="button">Другое действие</button>
    <button type="button">Что-то еще здесь</button>
  </div>
</div>

Вы также можете создавать неинтерактивные выпадающие элементы с помощью .dropdown-item-text. Не стесняйтесь изменять стиль с помощью пользовательских CSS или текстовых утилит.

<div>
  <span>Текст выпадающего списка</span>
  <a href="#">Действие</a>
  <a href="#">Другое действие</a>
  <a href="#">Что-то еще здесь</a>
</div>

Активный

Добавьте .active к элементам в раскрывающемся списке, чтобы сделать их активными.

<div>
  <a href="#">Обычная ссылка</a>
  <a href="#">Активная ссылка</a>
  <a href="#">Другая ссылка</a>
</div>

Отключенный

Добавьте .disabled к элементам в раскрывающемся списке, чтобы сделать их отключенными.

<div>
  <a href="#">Обычная ссылка</a>
  <a>Отключенная ссылка</a>
  <a href="#">Другая ссылка</a>
</div>

Выравнивание меню

По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя. Добавьте .dropdown-menu-right в .dropdown-menu, чтобы выровнять раскрывающееся меню по правому краю.

Внимание! Выпадающие списки располагаются благодаря Popper (кроме случаев, когда они содержатся в панели навигации).

<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Меню с выравниванием по правому краю
  </button>
  <div>
    <button type="button">Действие</button>
    <button type="button">Другое действие</button>
    <button type="button">Что-то еще здесь</button>
  </div>
</div>

Адаптивное выравнивание

Если Вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display="static" и используйте гибкие классы вариантов.

Чтобы выровнять вправо раскрывающееся меню с заданной контрольной точкой или больше, добавьте .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-expanded="false">
    По левому краю, но по правому краю на большом экране
  </button>
  <div>
    <button type="button">Действие</button>
    <button type="button">Другое действие</button>
    <button type="button">Что-то еще здесь</button>
  </div>
</div>

Чтобы выровнять слева раскрывающееся меню с заданной контрольной точкой или больше, добавьте .dropdown-menu-right и .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div>
  <button type="button" data-toggle="dropdown" data-display="static" aria-expanded="false">
    По правому краю, но по левому краю на большом экране
  </button>
  <div>
    <button type="button">Действие</button>
    <button type="button">Другое действие</button>
    <button type="button">Что-то еще здесь</button>
  </div>
</div>

Обратите внимание, что Вам не нужно добавлять атрибут data-display="static" к кнопкам раскрывающегося списка на панели навигации, поскольку Popper не используется в панелях навигации.

Содержание меню

Заголовки

Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.

<div>
  <h6>Заголовок раскрывающегося списка</h6>
  <a href="#">Действие</a>
  <a href="#">Другое действие</a>
</div>

Разделители

Разделите группы связанных пунктов меню разделителем.

<div>
  <a href="#">Действие</a>
  <a href="#">Другое действие</a>
  <a href="#">Что-то еще здесь</a>
  <div></div>
  <a href="#">Отдельная ссылка</a>
</div>

Текст

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

<div>
  <p>
    Пример текста, который свободно перемещается в раскрывающемся меню. 
  </p>
  <p>
    И это еще один пример текста.
  </p>
</div>

Формы

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

<div>
  <form>
    <div>
      <label for="exampleDropdownFormEmail1">Адрес электронной почты</label>
      <input type="email" placeholder="[email protected]">
    </div>
    <div>
      <label for="exampleDropdownFormPassword1">Пароль</label>
      <input type="password" placeholder="Пароль">
    </div>
    <div>
      <div>
        <input type="checkbox">
        <label for="dropdownCheck">
          Запомните меня
        </label>
      </div>
    </div>
    <button type="submit">Войти в систему</button>
  </form>
  <div></div>
  <a href="#">Новенький здесь? Зарегистрироваться</a>
  <a href="#">Забыли пароль?</a>
</div>

<form>
  <div>
    <label for="exampleDropdownFormEmail2">Адрес электронной почты</label>
    <input type="email" placeholder="email@example. com">
  </div>
  <div>
    <label for="exampleDropdownFormPassword2">Пароль</label>
    <input type="password" placeholder="Пароль">
  </div>
  <div>
    <div>
      <input type="checkbox">
      <label for="dropdownCheck2">
        Запомните меня
      </label>
    </div>
  </div>
  <button type="submit">Войти в систему</button>
</form>

Параметры раскрывающегося списка

Используйте data-offset или data-reference, чтобы изменить расположение раскрывающегося списка.

<div>
  <div>
    <button type="button" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Смещение
    </button>
    <div>
      <a href="#">Действие</a>
      <a href="#">Другое действие</a>
      <a href="#">Что-то еще здесь</a>
    </div>
  </div>
  <div>
    <button type="button">Справка</button>
    <button type="button" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span>Переключатель выпадающего списка</span>
    </button>
    <div>
      <a href="#">Действие</a>
      <a href="#">Другое действие</a>
      <a href="#">Что-то еще здесь</a>
      <div></div>
      <a href="#">Отдельная ссылка</a>
    </div>
  </div>
</div>

Применение

С помощью атрибутов данных или JavaScript плагин раскрывающегося списка переключает скрытый контент (раскрывающиеся меню), переключая класс . show в родительском .dropdown-menu. Атрибут data-toggle="dropdown" используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.

На устройствах с сенсорным экраном открытие раскрывающегося списка добавляет пустые ($.noop) обработчики mouseover к непосредственным дочерним элементам элемента <body>. Этот, по общему признанию, уродливый взлом необходим, чтобы обойти причуду в делегировании событий iOS, которая в противном случае предотвратила бы нажатие где-нибудь за пределами раскрывающегося списка от запуска кода, закрывающего раскрывающийся список. После закрытия раскрывающегося списка эти дополнительные пустые обработчики mouseover указателя мыши удаляются.

Через атрибуты данных

Добавьте data-toggle="dropdown" к ссылке или кнопке, чтобы переключить раскрывающийся список.

<div>
  <button type="button" data-toggle="dropdown" aria-expanded="false">
    Триггер выпадающего списка
  </button>
  <div>
    . ..
  </div>
</div>

Через JavaScript

Вызов выпадающих списков через JavaScript:

$('.dropdown-toggle').dropdown()

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-offset="".

Имя	Тип	По умолчанию	Описание
offset	number \| string \| function	0	Смещение раскрывающегося списка относительно его цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается как второй аргумент. Дополнительную информацию смотрите в документации Popper по смещению.
flip	boolean	true	Разрешить раскрывающемуся списку переворачиваться в случае перекрытия ссылочного элемента. Для получения дополнительной информации смотрите документации переворотов Popper.
boundary	string \| element	‘scrollParent’	Граница ограничения переполнения раскрывающегося меню. Принимает значения `'viewport'`, `'window'`, `'scrollParent'` или ссылку HTMLElement (только JavaScript). Дополнительную информацию смотрите в документации preventOverflow Popper.
reference	string \| element	‘toggle’	Справочный элемент раскрывающегося меню. Принимает значения `'toggle'`, `'parent'` или ссылка HTMLElement. Дополнительную информацию смотрите документацию referenceObject Popper.
display	string	‘dynamic’	По умолчанию мы используем Popper для динамического позиционирования. Отключите это с помощью `static`.
popperConfig	null \| object	null	Чтобы изменить конфигурацию Popper по умолчанию в Bootstrap, смотрите конфигурацию Popper.

Обратите внимание, что если параметр boundary имеет любое значение, отличное от 'scrollParent', к контейнеру .dropdown применяется стиль position: static.

Методы

Метод	Описание
`$().dropdown('toggle')`	Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
`$().dropdown('show')`	Показывает раскрывающееся меню данной панели навигации или навигации с вкладками.
`$().dropdown('hide')`	Скрывает раскрывающееся меню данной панели навигации или навигации с вкладками.
`$(). dropdown('update')`	Обновляет позицию раскрывающегося списка элемента.
`$().dropdown('dispose')`	Уничтожает раскрывающийся список элемента.

События

Все выпадающие события запускаются в родительском элементе .dropdown-menu и имеют свойство relatedTarget, значением которого является переключаемый элемент привязки. События hide.bs.dropdown и hidden.bs.dropdown имеют свойство clickEvent (только если исходный тип события click), который содержит объект события для события щелчка.

События	Описание
`show.bs.dropdown`	Это событие срабатывает немедленно, когда вызывается метод экземпляра шоу.
`shown.bs.dropdown`	Это событие запускается, когда раскрывающийся список становится видимым для пользователя (будет ожидать завершения переходов CSS).
`hide.bs.dropdown`	Это событие запускается сразу после вызова метода экземпляра hide.
`hidden.bs.dropdown`	Это событие запускается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).

$('#myDropdown').on('show.bs.dropdown', function () {
  // сделайте что-нибудь...
})

javascript — Как сделать плавный динамический выпадающий список?

Задать вопрос

Вопрос задан 2 года 4 месяца назад

Изменён 2 года 4 месяца назад

Просмотрен 2k раз

Я хочу сделать плавный выпадающий список

Я сделал вот такой вариант

. menu {
  padding: 0px;
  display: block;
}
.menu>li {
  margin: 0px;
  position: static;
}
.menu a {
  display: block;
  transition: 1s;
  color: blue;
}
.menu li {
  padding: 3px;
  max-height: 13px;
  overflow: hidden;
  background: #ff000059;
}
.menu ul {
  margin: 0px;
  padding: 0px;
  max-height: 0px;
  overflow: hidden;
  transition: 1s;
}
.menu li:hover {
  transition: 1s;
  max-height: 1000px;
}
.menu>li:hover {
  transition: 1s;
}
.menu li:hover ul {
  transition: 1s;
  max-height: 1000px;
}
.menu .test {
  padding: 10px;
  font-size: 30px;
}

<ul>
  <li><a href="#">position</a>
    <ul>
      <li><a href="#">top</a></li>
      <li><a href="#">left</a></li>
      <li><a href="#">down</a></li>
      <li><a href="#">right</a></li>
    </ul>
  </li>
  <li><a href="#">Object</a>
    <ul>
      <li><a href="#">Car</a>
        <ul>
          <li><a href="#">red</a></li>
          <li><a href="#">blue</a></li>
          <li><a href="#">black</a></li>
          <li><a href="#">yellow</a></li>
        </ul>
      </li>
      <li><a href="#">Windows</a>
        <ul>
          <li><a href="#">red</a></li>
          <li><a href="#">blue</a></li>
          <li><a href="#">black</a></li>
          <li><a href="#">yellow</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Но, проблема в том, что мне постоянно нужно подбирать нужный max-height. Особенно это сложно, если блоки разной высоты.

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

Желательно простой вариант с минимумом JS.

javascript
html
css

Может такой вариант подойдет:

ul:not(.menu) {
  overflow: hidden;
  max-height: 0;
  transition: 0.5s ease-out;
}
li:hover>ul {
  max-height:100vh;
  transition: 0.5s ease-in;
}

<ul>
  <li><a href="#">position</a>
    <ul>
      <li><a href="#">top</a></li>
      <li><a href="#">left</a></li>
      <li><a href="#">down</a></li>
      <li><a href="#">right</a></li>
    </ul>
  </li>
  <li><a href="#">Object</a>
    <ul>
      <li><a href="#">Car</a>
        <ul>
          <li><a href="#">red</a></li>
          <li><a href="#">blue</a></li>
          <li><a href="#">black</a></li>
          <li><a href="#">yellow</a></li>
        </ul>
      </li>
      <li><a href="#">Windows</a>
        <ul>
          <li><a href="#">red</a></li>
          <li><a href="#">blue</a></li>
          <li><a href="#">black</a></li>
          <li><a href="#">yellow</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как получить выбранное значение выпадающего списка в JavaScript

Programming Bytes

Бесплатный курс собеседования по системному проектированию

Получите полное руководство по собеседованию по системному проектированию от Educative бесплатно.

1. Получить выбранное значение из раскрывающегося списка

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

Консоль

Использование атрибута value для получения выбранного значения раскрывающегося списка

Объяснение

В приведенном выше коде:

Строки с 5 по 9: мы создаем поле выбора с тремя параметрами ( один , два и три ).

Строка 14: Мы создаем переменную с именем dropdownList и присваиваем созданному selectbox значение.

Строка 15: Мы связываем прослушиватель событий для события изменения в поле выбора . Назначенная функция будет выполнена, когда значение selectbox изменения. Внутри функции мы получаем свойство value поля выбора и печатаем его. Свойство value обозначает выбранное значение поля выбора .

2. Получить выбранное значение и текст выпадающего списка

Если мы хотим получить выбранный текст опции, то мы должны использовать свойство selectedIndex окна выбора . Свойство selectedIndex обозначает индекс выбранного параметра. Как только мы получим выбранный индекс, мы сможем получить доступ к выбранной опции. Отсюда мы можем получить значение и текст опции, обратившись к значение и текст свойство соответственно.

Консоль

Использование свойства selectedIndex для получения выбранного значения раскрывающегося списка два и три ).

Строка 14: Мы создаем переменную с именем dropdownList и присваиваем созданному выберите поле в качестве значения.

Строка 15: Мы связываем прослушиватель событий для события изменения в поле выбора . Назначенная функция будет выполняться при изменении значения поля выбора .

Строки 16 и 17: Внутри функции мы получаем свойство selectedIndex поля выбора и печатаем его. Он возвращает индекс выбранного элемента option в поле выбора .

Строка 18: Используя свойство selectedIndex , мы получаем выбранную опцию selectbox и сохраняем ее в переменной с именем selectedOption .

Строки 20 и 21: мы получаем доступ к свойству value и text selectedOption и печатаем его.

СВЯЗАННЫЕ ТЭГИ

javascript

УЧАСТНИК

Programming Bytes

Лицензия: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)

Динамический раскрывающийся список JavaScript, выбор второго списка html на основе первого значения

На основе выбора первого раскрывающегося списка параметры второго раскрывающегося списка могут быть изменены динамически.

Это широко используется в формах для сужения второго списка html на основе выбора первого раскрывающегося списка.

Примеры двух раскрывающихся списков

Например, если вы выбираете США в качестве страны из списка стран в html, вы можете найти только штаты США во втором списке. Это также может быть из списка штатов в список городов. На основе выбора списка штатов у нас может быть список городов во втором раскрывающемся списке.

В другом случае, если один и тот же набор из двух раскрывающихся списков используется снова и снова на одной странице, мы не можем отправлять информацию обратно каждый раз, когда пользователь делает выбор. Например, если мы покупаем продукты в магазине, и на странице есть 10 продуктов, каждый из которых имеет набор своих стандартных размеров упаковки. При выборе одного продукта во втором списке (размеры упаковки) отображаются размеры, доступные для этого продукта. Здесь на странице 10 строк таких двух выпадающих списков. Таким образом, посетитель может выбрать 10 различных продуктов и соответствующих размеров из выпадающих списков. Здесь для каждого выбора из первого списка мы не можем отправить данные на сервер и получить второй список. Здесь мы будем использовать клиентский JavaScript для управления опцией второго выпадающего списка. Это будет быстрее, чем скрипты на стороне сервера. Здесь суммарные данные обоих списков будут загружены только один раз во время загрузки страницы.

Мы будем использовать клиентский JavaScript для разработки этого скрипта. Мы можем добиться того же, используя скрипт на стороне сервера, такой как PHP. Если вы используете сценарий на стороне сервера, то данные при выборе первого раскрывающегося списка должны возвращаться на сервер и возвращаться. Иногда это не лучший выбор, если у пользователя медленное интернет-соединение.

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

Прочитайте, как Ajax используется для управления двумя выпадающими списками в разделе PHP.

На этом давайте перейдем к демонстрации скрипта. Здесь у нас есть три элемента (опции) в первой категории выпадающего списка (фрукты, игры и сценарии), и у каждой есть три опции, три подопции (подкатегории).

Скрипт и загрузка

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

Узнайте, как создается тот же выпадающий список, взяв данные из таблицы Mysql.
← Подпишитесь на наш канал YouTube здесь

Эта статья написана командой plus2net.com .

plus2net.com

Подробнее о двойном раскрывающемся списке и JavaScript Подробнее о списках и JavaScript

Webbieads	08. 03.2010
Отлично, скрипт, я хочу его использовать, но у меня две формы (совершенно одинаковые) на одной html-странице, и я не могу реализовать этот скрипт для обоих — знаете, как я могу это сделать?

Том	11-02-2011
Код не работает, если пользователю разрешено делать множественный выбор (т. е. множественный = «несколько»). Пожалуйста, добавьте обновление для этого в свой учебник. Спасибо!

сардар	19-03-2011
как интегрировать ajax с множественным выбором с выпадающим списком. есть ли решение для этого ваша помощь будет оценена по достоинству

новичок	31-05-2011
Можете ли вы сказать мне, как кодировать значения категорий и подкатегорий для отображения в формате utf-8?

Джеймс

06. 01.2011

Мне нужно, чтобы в моей форме было несколько экземпляров раскрывающегося списка Double (мне нужно использовать его три раза). Я не смог понять это, может ли кто-нибудь предложить помощь? Мой опыт программирования минимален, но я смог относительно легко следовать этому руководству и реализовать его (динамическое заполнение второго списка…) за пару часов, и теперь я очень счастлив — спасибо!

vinu	15-03-2012
hai this nice then display the coding all of u used it

debbieh

17-05-2014

Мне нужны результаты двух вариантов выбора из раскрывающегося списка 1) Штат 2) Город, чтобы затем заполнить страницу списков компаний (конкретные категории) — скажем, это городские, окружные и федеральные суды.

Javascript раскрывающийся список: Элемент управления javascript выпадающий список — select

Выпадающие списки · Bootstrap v4.6

Обзор

Доступность

Примеры

Одна кнопка

Раздельная кнопка

Размеры

Направления

Выпадающий вверх

Выпад вправо

Выпадающий влево

Пункты меню

Активный

Отключенный

Выравнивание меню

Адаптивное выравнивание

Содержание меню

Заголовки

Разделители

Текст

Формы

Параметры раскрывающегося списка

Применение

Через атрибуты данных

Через JavaScript

Параметры

Методы

События

javascript — Как сделать плавный динамический выпадающий список?

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Как получить выбранное значение выпадающего списка в JavaScript

1. Получить выбранное значение из раскрывающегося списка

Объяснение

2. Получить выбранное значение и текст выпадающего списка

Динамический раскрывающийся список JavaScript, выбор второго списка html на основе первого значения

Примеры двух раскрывающихся списков

Скрипт и загрузка

Добавить комментарий Отменить ответ

Рубрики

Рубрики