Joy
Joy

Reputation: 9550

Semantic UI: active dropdown menu not working

The Semantic UI dropdown menu works well by adding (http://jsfiddle.net/VL2Zq/22/):

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

However, the dropdown menu cannot be displayed if I add the class active: http://jsfiddle.net/VL2Zq/21/

<div class="ui dropdown item active">

Upvotes: 0

Views: 1745

Answers (1)

MTran
MTran

Reputation: 1809

For now, I suggest to use select box with the value selected, and convert it to semantic UI dropdown list. This however isn't the best and most flexible approach.

  <h2>Official Search Selection Dropdown Select Tag</h2>
  <select name="country" class="ui search selection dropdown">
    <option value="">State</option>
    <option>Alabama</option>
    <option>Alaska</option>
    <option>Washington</option>
    <option>West Virginia</option>
    <option>Wisconsin</option>
    <option selected>Wyoming</option>
  </select>

http://jsfiddle.net/VL2Zq/23/

Edit:

Found that Semantic UI already has a method to handle this.

$('.dropdown').dropdown();
var selectedValue = "Female";
$('.dropdown').dropdown('set selected', selectedValue);

http://jsfiddle.net/ap3kfftw/1/

Upvotes: 1

Related Questions