Опция добавления Selectpicker в optgroup

Я хочу добавить опцию в optgroup с помощью jQuery. Я использую bootstrap selectpicker. Вот мой код:

var groupOption = "<option value='123'>123</option>";
$("#selectpickerdemo").append(groupOption).selectpicker('refresh');

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class = "selectpicker" multiple name = "selectpickerdemo" id = "selectpickerdemo">
  <optgroup label = "Label 1">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
  </optgroup>
  <optgroup label = "Label 2">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
  </optgroup>
</select>

Вам просто нужно выбрать элемент optgroup перед вызовом append(), а не select, как вы делаете сейчас.

— 23.04.2018 14:57

@RoryMcCrossan, я пробовал. Я дал идентификатор каждой группе optgroup и попытался добавить опцию, используя этот идентификатор, но это не сработало.

— 23.04.2018 15:47

php jquery twitter-bootstrap bootstrap-selectpicker

23.04.2018 14:56

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

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

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...

2 398

Ответы 2

Пожалуйста, используйте атрибут id (или другие, например class и т. д.). например

...
<optgroup label = "Label 1" id = "label1">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
</optgroup>
...

var opt_label1 = $("#label1" );
$("<option>").text('option text').val('option value').appendTo(opt_label1);

Для получения дополнительных сведений см. Этот пример. http://jsfiddle.net/jonathansampson/493qa/

Хочу добавить под определенную группу optgroup. например, под ярлыком 1 или ярлыком 2

— 23.04.2018 15:46

Используя атрибуты id или class, получите от него объект jQuery optgroup. И используйте метод appendTo, чтобы добавить option в объект jQuery.

— 23.04.2018 15:54

Я пробовал, но бутстрап конвертирует optgroup и option в формат ul li

— 23.04.2018 16:05

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

— 24.04.2018 02:33

Bootstrap v3.3.6

— 24.04.2018 07:02

23.04.2018 15:01

Выберите <optgroup на основе id или label, как обычный селектор.

Соответствующий код:

$("#selectpickerdemo optgroup#label1").append(groupOption).selectpicker('refresh');

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

$("#selectpickerdemo optgroup[label='Label 1']").append(groupOption).selectpicker('refresh');

Вот отрывок:

var groupOption = "<option value='123'>123</option>";
$("#selectpickerdemo optgroup#label1").append(groupOption).selectpicker('refresh');

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">

<script src = "https://code.jquery.com/jquery-3.2.1.js"></script>
<script type = "text/javascript" src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class = "selectpicker" multiple name = "selectpickerdemo" id = "selectpickerdemo">
  <optgroup label = "Label 1" id = "label1">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
  </optgroup>
  <optgroup label = "Label 2" id = "label2">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
  </optgroup>
</select>

Надеюсь это поможет.

27.04.2018 23:18