Question

基于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'));给出空数组;

如何从下拉列表中选择值？

Answer 1

建议你的代码如下：

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

输出：

[＆＃34; stack＆＃34;，＆＃34; queue＆＃34;]

注意：

确保html中没有隐藏的输入字段，否则返回字符串值而不是值数组

Answer 2

通过将代码重写为：

解决

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

Answer 3

您仍然可以使用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);
        }
    }

}

Semantic-UI多个选择获取值

3 个答案: