语义UI无法从多个选择下拉列表中获取文本和值

Question

我用API填充了我的多个选择下拉列表。问题是按下按钮时无法获取文本或值。我究竟做错了什么？！选项1是我实施它的方式。选项2是我能获得价值的唯一方式，但是，其他一切都不起作用。

HTML

<!-- Opt 1 -->
<select id="drp1" class="ui fluid multiple selection dropdown opt1" multiple="">
</select>
<button id="btn1">Btn 1</button>
<button id="btn11">Btn 11</button>
<hr>

<!-- Opt 2 -->
<div id="drp2" class="ui fluid multiple selection dropdown opt2" multiple="">
</div>
<button id="btn2">Btn 2</button>

JS

a = {'values': [
  {'name': 'a', 'value':'1', 'text': 'a'},
  {'name': 'b', 'value':'2', 'text': 'b'},
  {'name': 'c', 'value':'3', 'text': 'c'},
]}

$(".ui.dropdown").dropdown();
$(".ui.dropdown.opt1").dropdown('setup menu', a);
$(".ui.dropdown.opt1").dropdown('set selected', ['a','c']);

$(".ui.dropdown.opt2").dropdown('setup menu', a);
$(".ui.dropdown.opt2").dropdown('set selected', ['a','c']);

$('#btn1').click(function(){
    var tmp = $('.ui.dropdown.opt1').dropdown('get value');
  var tmp2 = $('.ui.dropdown.opt1').dropdown('get text');
  alert(tmp + " || " + tmp2);
});

// I can get the value by adding a but not text
$('#btn11').click(function(){
    var tmp = $('.ui.dropdown.opt1 a').dropdown('get value');
  var tmp2 = $('.ui.dropdown.opt1 a').dropdown('get text');
  alert(tmp + " || " + tmp2);
});


$('#btn2').click(function(){
    var tmp = $('.ui.dropdown.opt2').dropdown('get value');
  var tmp2 = $('.ui.dropdown.opt2').dropdown('get text');
  alert(tmp + " || " + tmp2);
});

JSFiddle

Answer 1

以下是在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);
        }
    }

}