jquery - How to set initial dropdown value using javascript?

Question

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

Answer 1

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>