Semantic-UI Multiple selection get values

Question

Based on Semantic-UI docs, https://semantic-ui.com/modules/dropdown.html#multiple-selections

I have following code inside angular2 template:

<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>

I'd like to get array of selected values from Select to angular model form.thickness

However, I am getting empty array. inside ngOnInit I have $('#thickness').dropdown();

console.log($('#thickness').dropdown('get value')); gives empty array;

How to get values from dropdown multiple selection?

Kweichow

Answer 1

Suggesting that your code looks like this:

<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>

the following will return an array of selected values:

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

Output:

["stack", "queue"]

Note:

Make sure not to have hidden input field in the html otherwise it returns a string value instead of array of values

Swane

get value did not work for me, but get values did. – Benildas

Note that this only works when you define the options in HTML, not if you initialize the values by JavaScript (i.e. pass the values in the dropdown() function). – Chester

@Chester Isn't there any solution for that case? i.e. when initializing with JS. – Verla

Answer 2

You can still use select. Here's how to do it in 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);
        }
    }

}

Alysiaalyson

Answer 3

Solved by rewriting code to:

        <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>

Kweichow