I am trying to select the value selected in the dropdown using the value from the local storage. My dropdown code for html looks like this.
<div> <label class="ui teal big label"><b>Project Members</b></label> <div class="ui selection dropdown"> <i class="user icon"></i> <input type="hidden" name="member"> <i class="dropdown icon"></i> <div class="text">Select Project Member</div> <div id="memberMenu" class="menu"> <?php foreach ($MEMBERS as $projectmember) { ?> <div id="<?php echo $projectmember['id']; ?>" class="item"><?php echo $projectmember['name'] . " " . $projectmember['surname'] ?></div> <?php } ?> </div> </div> <button onclick="applyProjectMemberFilterToGeneralProjectHours()" name="applyFilter2" class="ui button large primary">Apply Filter</button> </div>
I am trying to set the value selected in the dropdown like this. But this does not work.
var memId = localStorage.getItem("memberFilters"); if (memId != null && memId != "" && memId != "null") { $(".ui.selection.dropdown select").val(memId); }
Advertisement
Answer
The semantic-ui docs (that I found) are limited on API methods, so there’s probably a very simple “set value to” api that you can call.
Here’s the equivalent of that call.
First, change your id=
to data-value
to match the examples (probably not required, but will likely make your “dropdown” set the correct value if changing it manually). I’ve also given the outer div an id memberDropdown
so it’s easier to reference.
$('.ui.dropdown').dropdown(); $("#btn").click(function() { // the data-value to find, in your original code, from localstorage var id = 2; // find the drop down item var item = $("#memberDropdown .menu>[data-value=" + id + "]"); // set the hidden input value and the displayed text $("#memberDropdown [name=member]").val(id); $("#memberDropdown .text").text(item.text()); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <div> <div class="ui selection dropdown" id="memberDropdown"> <i class="user icon"></i> <input type="hidden" name="member"> <i class="dropdown icon"></i> <div class="text">Select Project Member</div> <div id="memberMenu" class="menu"> <div data-value="1" class="item">First</div> <div data-value="2" class="item">Second</div> </div> </div> </div> <button id='btn' type='button'>click me</button>