Reputation: 515
I'm trying to get the user selections from a multi-select dropdown but I don't seem to be able to get them. Here is the HTML:
<div id="content_dropdown" class="ui multiple search normal selection dropdown" style="border-radius: 0px;width: 100%;">
<i class="dropdown icon"></i>
<div class="default text">Dashboard widget, Improved reporting</div>
<div id="content_dropdown_menu" class="menu">
{% for content_tag in content_tags %}
<div class="item" data-value="{{content_tag}}">{{content_tag}}</div>
{% endfor %}
</div>
</div>
And here is the javascript I have tried:
var selectedValues = $('#content_dropdown').val();
var selectedValues = $('#content_dropdown').dropdown('get value');
Both of these return nothing even though the dropdown is populated.
I should also note that I had this working in a separate page, but I have been moving content onto 1 page, where I put this form into a modal. I'm not sure why this would affect it, just thought I'd point it out.
Thanks.
Upvotes: 1
Views: 576
Reputation: 86
.dropdown('get value') won't work for multiple. You'll have to find a way to observe changes to dropdown. 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);
}
}
}
Upvotes: 1
Reputation: 1658
Try this:
var selectedValues;
$('#content_dropdown')
.dropdown({
action: function(text, value) {
selectedValues = value;
}
})
;
Upvotes: 0