Semantic UI: How to define selected item of search dropdown ("<select>")?

Question

how can I set the selected item of a search dropdown (select) form field? I tried it with the following jQuery/JavaScript code:

if (equal == 0) {
    $('#sj_company').html($('#sj_company').html() + '<option value="' + key + '" selected="selected">' + data[key] + '</option>');
    $('.searchdropdown').dropdown('set selected', data[key]);
} else {
    $('#sj_company').html($('#sj_company').html() + '<option value="' + key + '">' + data[key] + '</option>');
}

Edit: The base is the semantic ui frontend framework ;-)

Answer 1

My mistake was: I have initialized the Semantic UI Dropdown before I've loaded the dropdown items via AJAX. The solution: Initialize the Dropdown AFTER the AJAX loading process.

Answer 2

For the Semantic UI framework, you should consult the guide here: dropdown behavior. That tells us to make the following call:

$('#dropdown').dropdown('set selected', value);

Or pass an object (perhaps useful for multiple select or to the developer's preference):

$('#dropdown').dropdown({'set selected': value});

Non-framework answer (before question was edited for specific framework)

If the select list has an id of say dropdown, you can do:

$('#dropdown').val();

To set the value, say the option has a value of a, you can do:

$('#dropdown').val('a');

I suggest reading the jQuery page on .val().

JSFiddle example: http://jsfiddle.net/vo9kpsry/1

Answer 3

You can simply set the default value by set hidden value input which is exist with semanic dropdown:

<div class="dropdown">
    <input type="hidden" name="countries" value="tf">
    <i class="dropdown icon"></i>
    <div class="default text">
    </div>
    <div class="menu">
        <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
        <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
        <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
    </div>
</div>

Maybe too late but someone may need it

Answer 4

fomantic-ui

Update answer to (fomantic-ui) (The official community fork of the popular Semantic-UI framework). **Semantic-UI not maintain since 2018.

Examples: Two option (cat, dog) select dog by deafult.

Option 1 - By hidden input

<input type="hidden" name="type" value="dog">

Selection dropdowns can be initialized directly on a select or with the matching HTML and a hidden input.

$('.ui.dropdown')
  .dropdown();

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" rel="stylesheet"/>

<div class="ui dropdown selection">
  <input type="hidden" name="type" value="dog">
  <i class="dropdown icon"></i>
  <div class="default text">Animal</div>
  <div class="menu">
    <div class="item" data-value="cat">Cat</div>
    <div class="item" data-value="dog">Dog</div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

Option 2 by set selected API

set selected(value,$selectedItem,preventChangeTrigger)

Sets value as selected.

https://fomantic-ui.com/modules/dropdown.html#behavior

  let initial_state = "dog";
  $('.dropdown')
    .dropdown('set selected', initial_state);

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" rel="stylesheet"/>

<div class="ui selection dropdown">
  <input type="hidden" name="pet">
  <i class="dropdown icon"></i>
  <div class="default text">Cat</div>
  <div class="scrollhint menu">
    <div class="item" data-value="cat">Cat</div>
    <div class="item" data-value="dog">Dog</div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

Option 3 - Initializing with Javascript only

https://fomantic-ui.com/modules/dropdown.html#initializing-with-javascript-only

selected : true

$('.ui.dropdown')
  .dropdown({
    values: [
      {
        name: 'cat',
        value: 'cat'
      },
      {
        name     : 'dog',
        value    : 'dog',
        selected : true
      }
    ]
  })
;

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" rel="stylesheet"/>

<div class="ui selection dropdown">
  <div class="text"></div>
  <i class="dropdown icon"></i>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

Option 4 by option selected attribute

Not API option.

https://www.w3schools.com/tags/att_option_selected.asp

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" rel="stylesheet"/>

<select class="ui selection dropdown">
    <option class="item" data-value="cat">Cat</option>
    <option class="item" data-value="dog" selected>Dog</option>
</select >


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>