Semantic UI Dropdown: Change the hidden field values?

Question

I am working with semantic-ui dropdown. I am wondering on how to change the values in hidden field based on user selection from the dropdown list ? Related Question may be!.

<div class="ui selection dropdown select-language">
    <input name="language" type="hidden" value="Alpha-Male">
    <div class="text">Gender</div>
    <i class="dropdown icon"></i>
    <div class="menu ui transition hidden">
        <div class="item" data-value="Alpha-Male">Male</div>
        <div class="item active" data-value="Alpha-Female">Female</div>
    </div>
</div>

Answer 1

I checked out the source code of SemanticUI library and I found that the module functions are stored in data() using jQuery.

So, to access dropdown methods for your element you will do:

 $(".ui.selection").data().moduleDropdown

Change value is actually action.activate(text, value) function.

For example, to set Alpha-Female value you will do:

 $(".ui.selection")
   .data()
   .moduleDropdown
   .action
   .activate(undefined, "Alpha-Female")
 ;

JSFIDDLE