Strobe_
Strobe_

Reputation: 515

Can't get values from SemanticUI multi dropdown

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

Answers (2)

Programmer
Programmer

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

br3t
br3t

Reputation: 1658

Try this:

var selectedValues;

$('#content_dropdown')
  .dropdown({
    action: function(text, value) {
      selectedValues = value;
    }
  })
;

Upvotes: 0

Related Questions