Semantic-ui: Can't select a default dropdown item when using div-based dropdowns

[rightaway]

If I'm rendering a page with a dropdown that has a pre-existing value (e.g. from a DB) and I want to pre-initialize that value, what do I need to do? In a regular dropdown I would set 'selected' attribute to true, but in this one I'm not sure what to do. I render the page with 'active selected' class on the div class='item' below but the page doesn't render with that value already selected.

Would it have to be done using the same JS command that Semantic uses to change the selection?

    <div class='ui field selection dropdown'>
        <input name='item' type='hidden'>
        <div class='default text'>Item</div>
        <i class='dropdown icon'></i>
        <div class='menu'>
             // loop over divs
              <div class='item' data-value='ITEM'>ITEM</div>
        </div>
    </div>

[jlukic]

I'm away from my computer, but you can set the hidden input value to match the selected drop down value to have it selected by default. To add placeholder text change class="text" to class="default text" and add placeholder text as the text contents.

[nilsi]

Im trying to do something related by looping over categories from the database and then setting all options by default. This is what I would like to do:

 <select  data-id="{{_id}}" class="ui fluid dropdown category-select" multiple="">
    {{#each categories}}
    <option value="{{this}}" data-value="{{this}}" selected="true">{{this}}</option>
    {{/each}}
</select>

But selected="true" does not work as pointed out previously. I know I can do this after I rendered the template with something like:

$( ".category-select" ).each(function( index ) {
    // get options value and set them using dropdown('set selected', value);
});

But would be nice if I could do it already when rendering the HTML. Is it possible?

Edit:
If there is no way of doing it. Is there a way to get all options for a dropdown? So I can set it using javascript. I know about $('.category-select').dropdown('get value') but that only returns the ones that are set.

[jlukic]

Selects need normal option code, not data-value
http://jsfiddle.net/dn7vseka/

[nilsi]

Thank you!

[pg1671]

I am trying to do the same as the original author and do not want to switch to select based options because I find the rendering to be inefficient. When using the select option I find that the select is rendered as a default dropdown in the browser and then switches to the semantic rendered dropdown .. this can look bad .. especially when the delay between re-rendering is longer.

The div based approach has no re-render and looks a lot cleaner.

So if possible I would like to be able to specify selected on the item class as I am rendering the html rather than having to render the html and then do anther loop in javascript to find and set the selected item using 'set selected'.

thanks.

[awgv]

Hi @pg1671, I think you can basically add value="value" to a hidden input, and the component will handle the rest during the initialization.

[frellan]

I have a problem with this, I have done exactly as described here and in the documentation but it just doesn't work, at all. I do this (Vue.js)

<input
    type="hidden"
    :value="value"
    @change="updateValue($event.target.value)"
>

It is rendered as this on init, the data-value and the value of the input field are clearly the same.

But it still does not preselect anything, it just shows the placeholder, and if I remove that, it is empty.

I have even tried this

$('.ui.fluid.dropdown.button').dropdown()
$('.ui.fluid.dropdown.button').dropdown({'set selected': this.value })

But still

What am I doing wrong here?

[dlynchcodes]

I'm able to set the default value on page load, but I can't seem to use the API when the dropdown has default values.

[malyfko]

From documentation:

$('.your.element')
  .dropdown('set selected', 'value');

[dlynchcodes]

@malyfko I believe that only works if the values are already available or if the mutation observer has observed the new values. I've had trouble getting this to work in the past.

I believe the proper way to do this is to provide the values in the default "values" array, where the selected items have the selected flag set to true

From documentation:

$('.ui.dropdown')
  .dropdown({
    values: [
      {
        name: 'Male',
        value: 'male'
      },
      {
        name     : 'Female',
        value    : 'female',
        selected : true
      }
    ]
  })
;

This is new as of 2.2.12 and it works great for me.

[malyfko]

@dlynch29 I've tried this solution too, but for some reason it "doubles" selected value, meaning it would show "Female Female". I couldn't figure out why. And yes, you're right, the solution I suggested is only for already available values (although I didn't try it with loaded values). I'm curious though, if I, say, load a list of available values from some file or API - doesn't really matter - which is just a list, and the information about which one is selected is saved somewhere else, separately - this wouldn't work would it? You'd have to load 'options' first, and then set one of them as 'selected'. Am I right?

UPD. I'm using v2.3.0

[dlynchcodes]

@malyfko I would be interested in seeing a jsfiddle for your duplicated items issue, because I haven't encountered that.

Actually this doesn't seem to be an issue for me, for two reasons in two specific instances.

When not using a multiple select dropdown, it still shows the default value in the available list of items but I think this is a minor issue, and since it's not a multiple select dropdown, it's impossible to add the item twice.

When using a multiple select dropdown, the values _do_ indeed show up twice, but this is currently irrelevant considering #5566

If #5566 is fixed then what you mention may become an issue.

[ethernidee]

So there is still no way to preselect multiple items directly in markup without Javascript?