Как сделать выпадающий список Bootstrap?

Итак, у меня есть следующий код для раскрывающегося списка, сделанного с помощью бутстрапа:

<div class="btn-group">
    <button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">France</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
     </ul>
</div>

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

Ответ 1

Если мы просто введем обязательный тег select и <option value="">None</option> в опцию, он будет работать для проверки. Я ссылаюсь на эту страницу.

Работы по выбору должны быть сделаны среди предоставленных значений.

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

 <form action="demo_form.asp">
    <select required>
      <option value="">None</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
    </form>

Приведенный выше код отлично подходит для проверки, например "Выбор элемента в списке перед отправкой".

Ответ 2

Не могли бы вы просто использовать выбрать элемент и применить его к тегу?

<select class="form-control" required>
    <option>België/Belgique</option>
    <option>Deutschland</option>
    <option>France</option>
    <option>Nederland</option>
    <option>United Kingdom</option>
</select>

См. этот вопрос SO в частности.

Ответ 3

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

<select id='terms' class='form-control' required>
    <option selected disabled>Select </option>
    <option value="Y">Yes</option>
    <option value="N">No</option>
</select>

Ответ 4

В CSS:

.btn.btn-default.dropdown-toggle.is-invalid {
  border-color: #dc3545;
}

В HTML:

<input type="hidden" class="form-control"  name="idType" required />
<div class="btn-group">
    <button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">France</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
     </ul>
</div>

В JavaScript: установите значение поля ввода при выборе раскрывающегося списка.

Ответ 5

<select class="form-control" required="required">
 <option>A</option>
 <option>A</option>
 <option>A</option>
</select>

пожалуйста, установите обязательный = "обязательный" в вашем селекторе