如何使用 javascript 设置初始下拉值？

Question

我正在尝试使用本地存储中的值 select 在下拉列表中 select 编辑值。 html 的下拉代码如下所示。

                   <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>

我正在尝试像这样在下拉列表中设置值 selected。但这是行不通的。

    var memId = localStorage.getItem("memberFilters");
        if (memId != null && memId != "" && memId != "null") {
            $(".ui.selection.dropdown select").val(memId);
        }

Answer 1

您应该使用 jQuery .attr() 来设置和获取任何 none 表单标签的值。然后使用 .html() 或 .text() 获取不是属性

的 div 标签的正常内容

Answer 2

semantic-ui docs（我发现）仅限于 API 方法，因此您可以调用一个非常简单的“设置值”api。

下面是那个调用的等价物。

首先，将您的 id= 更改为 data-value 以匹配示例（可能不是必需的，但如果手动更改它可能会使您的“下拉菜单”设置正确的值）。我还给外部 div 一个 id memberDropdown 以便于参考。

$('.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>

如何使用 javascript 设置初始下拉值？

How to set initial dropdown value using javascript?

javascript

jquery

semantic-ui