Login/Register
Semantic UI: How to define selected item of search dropdown ("<select>")?
Asked Answered
Solved javascriptsemantic-ui
B

4

17

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 ;-)

Balata answered 10/6, 2015 at 16:14 Comment(1)
No that also not working... – Balata
B
4

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.

Balata answered 10/6, 2015 at 16:32 Comment(1)
Great that it solves your problem but that isn't always possible, as there are use cases where the values need to be set later. – Mushro
U
32

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

Unbend answered 10/6, 2015 at 16:15 Comment(14)
I don't want to get the value, I want to set it! – Balata
@AntonDachauer Ah, okay -- I updated the answer. You can pass the value to the val call to set it -- like $('#dropdown').val('a');. – Unbend
No, not with Semantic UI (Not with Semantic UI (semantic-ui.com/modules/dropdown.html) – Balata
@AntonDachauer I've updated with the answer for Semantic UI. In the future, if you are not using standard DOM/HTML/JavaScript, you should state that up front. – Unbend
I'm talking about an Semantic UI Dropdown (Semantic UI is a frontend framework). It's based on a HTML select, that's true. – Balata
@AntonDachauer Which is completely unrelated to the question -- there is no way to know that is the problem based on the details in the question. – Unbend
Let us continue this discussion in chat. – Balata
@AntonDachauer No need! I don't have anything else to add. I'm glad you figured out your problem. – Unbend
The right behaviour format is $('#dropdown').dropdown('set selected', value); – Mechanotherapy
@Mechanotherapy I suspect you can also pass the an object with multiple key-values to handle multiple selects. I like passing the object even for one. – Unbend
@Mechanotherapy But I updated the answer as it is a valid point! Thanks. – Unbend
For a multiple selection dropdown, I was able to select multiple items by making successive calls. For example, $('#dropdown').dropdown('set selected', 'value_1') followed by $('#dropdown').dropdown('set selected', 'value_2') – Gentlemanatarms
@Gentlemanatarms does it also work to do $('#dropdown').dropdown('set selected', ['value_1', 'value_2']) -- just curious if it accepts an array for value? – Unbend
@Unbend Yes, an array ['value_1', 'value_2'] does work. It is cumulative so, to reset you will need to $('#dropdown').dropdown('clear') – Gentlemanatarms
L
16

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

Lingenfelter answered 4/7, 2018 at 13:27 Comment(0)
B
4

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.

Balata answered 10/6, 2015 at 16:32 Comment(1)
Great that it solves your problem but that isn't always possible, as there are use cases where the values need to be set later. – Mushro
B
3

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>
Barbe answered 14/6, 2022 at 18:18 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.