dropdown tests

dropdown tests

by ryan Couch

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<form class="ui form">
  <div class="field">
    <label for="test">Seasons</label>
    <div class='ui multiple search selection dropdown seasons'>
      <input name="seasons" id="seasons" value="winter,spring,summer" type="hidden">
      <i class="dropdown icon"></i>
      <div class="default text">Select</div>
      <div class="menu">
        <div class="item" data-value="winter">Winter</div>
        <div class="item" data-value="spring">Spring</div>
        <div class="item" data-value="summer">Summer</div>
        <div class="item" data-value="NA">NA</div>
      </div>
    </div>
  </div>
</form>
<p>

</p>

<button class="ui button" type="button">
Add value
</button>

CSS

body {
  margin : 20px;
}

JavaScript

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


$('.ui.button').on('click', function(){
   //get menu
   var $menu =  $('.seasons').find('.menu');
   //append new option to menu
   $menu.append('<div class="item" data-value="fall">Fall</div>');
   //reinitialize drop down
   $('.ui.dropdown.seasons').dropdown();
   
   //optional, set new value as selected option
   $('.ui.dropdown.seasons').dropdown('set selected',['fall', 'winter']);
});