Semantic-UI Множественный выбор для получения значений

На основе документов Semantic-UI, https://semantic-ui.com/modules/dropdown.html#multiple-selections

У меня есть следующий код внутри шаблона angular2:

<select id="thickness" name="thick" [(ngModel)]="form.thickness" multiple="multiple" class="ui multiple dropdown selection">
     <option value="">Выбрать</option>
     <option value="100">100 mm</option>
     <option value="150">150 mm</option>
     <option value="200">200 mm</option>
     <option value="250">250 mm</option>
     <option value="300">300 mm</option>
     <option value="375">375 mm</option>
     <option value="400">400 mm</option>
</select>

Я хочу получить массив выбранных значений из Select в угловую модель form.thickness

Однако я получаю пустой массив. внутри ngOnInit у меня $('#thickness').dropdown();

console.log($('#thickness').dropdown('get value')); дает пустой массив;

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


jquery semantic-ui
person Evgheny Kalkutin    schedule 27.03.2017    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Предположим, что ваш код выглядит так:

<div class="ui multiple selection dropdown">
    <i class="dropdown icon"></i>
    <div class="default text">Tag Multiple Categories</div>
        <select multiple="" id="multi-select">
            <option value="">Categories</option>
            <option value="datastructure">Data Structure</option>
            <option value="stack">Stack</option>
            <option value="queue">Queue</option>
        </select>
    </div> 
</div>

следующее вернет массив выбранных значений:

$("#multi-select").dropdown("get value")

Вывод:

["стек", "очередь"]

Примечание:

Убедитесь, что в html нет скрытого поля ввода, иначе оно вернет строковое значение вместо массива значений.

person Supritha P    schedule 12.04.2017
comment
get value у меня не сработало, но get values сработало. - person skwny; 15.02.2019
comment
Обратите внимание, что это работает только тогда, когда вы определяете параметры в HTML, а не если вы инициализируете значения с помощью JavaScript (т.е. передаете values в функции dropdown()). - person Czechnology; 21.04.2019
comment
@Czechnology В этом случае нет решения? т.е. при инициализации с помощью JS. - person therealak12; 08.11.2020

arrow_upward
1
arrow_downward

Вы все еще можете использовать select. Вот как это сделать в Aurelia: form.html:

<select id="thickness" name="thick"  multiple="" class="ui multiple dropdown selection" value.bind="thickness_selected">
     <option value="">Выбрать</option>
     <option value="100">100 mm</option>
     <option value="150">150 mm</option>
</select>

form.ts:

export class form {

    thickness_selected: number[] = [];

submit() {
        const self = this;
        for (let id of self.thickness_selected) {
            console.log(id);
        }
    }

}
person Programmer    schedule 27.03.2019

arrow_upward
0
arrow_downward

Решено переписыванием кода на:

        <div id="thickness" class="ui multiple selection dropdown">
          <input name="thick" type="hidden">
          <i class="dropdown icon"></i>
          <div class="default text">Выбрать</div>
          <div class="menu">
            <div class="item" data-value="100">100 mm</div>
            <div class="item" data-value="150">150 mm</div>
            <div class="item" data-value="200">200 mm</div>
            <div class="item" data-value="250">250 mm</div>
            <div class="item" data-value="300">300 mm</div>
            <div class="item" data-value="375">375 mm</div>
            <div class="item" data-value="400">400 mm</div>
          </div>
        </div>
person Evgheny Kalkutin    schedule 27.03.2017