Semantic UI：如何定义搜索下拉列表（"<select>"）中的选定项目？

Question

如何设置搜索下拉（select）表单字段的选定项？我尝试使用以下jQuery / JavaScript代码：

if (equal == 0) {
    $('#sj_company').html($('#sj_company').html() + '<option value="' + key + '" selected="selected">' + data[key] + '</option>');
    $('.searchdropdown').dropdown('set selected', data[key]);
} else {
    $('#sj_company').html($('#sj_company').html() + '<option value="' + key + '">' + data[key] + '</option>');
}

编辑： 基础是语义化的UI前端框架;-)

- user4144415

---

不行，那也不起作用... - user4144415

Answer 1

对于语义化UI框架，你应该参考这里的指南：下拉菜单行为。它告诉我们进行如下调用:

$('#dropdown').dropdown('set selected', value);

或者传递一个对象（可能对于多选或开发人员的喜好有用）：

$('#dropdown').dropdown({'set selected': value});

非框架答案（在问题针对特定框架之前编辑）

如果选择列表具有ID，比如说dropdown，你可以这样做：

$('#dropdown').val();

要设置值，例如选项的值为a，你可以这样做：

$('#dropdown').val('a');

我建议阅读jQuery页面上的.val()。

JSFiddle示例：http://jsfiddle.net/vo9kpsry/1

- Cymen

---

@AntonDachauer 我已经更新了关于Semantic UI的答案。在未来，如果您不使用标准的DOM/HTML/JavaScript，请提前声明。 - Cymen

@AntonDachauer不用了！我没有别的要补充的了。很高兴你解决了问题。 - Cymen

正确的行为格式是$('#dropdown').dropdown('set selected', value);。 - praisegeek

@kmxr它是否也可以使用$('#dropdown').dropdown('set selected', ['value_1', 'value_2']) -- 只是好奇它是否接受一个值的数组？ - Cymen

@Cymen 是的，一个数组 ['value_1', 'value_2'] 可以工作。它是累积的，所以要重置，你需要 $('#dropdown').dropdown('clear')。 - kmxr

Answer 2

您可以通过设置存在于语义下拉列表中的隐藏值输入来简单地设置默认值：

<div class="dropdown">
    <input type="hidden" name="countries" value="tf">
    <i class="dropdown icon"></i>
    <div class="default text">
    </div>
    <div class="menu">
        <div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
        <div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
        <div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
    </div>
</div>

也许有些晚了，但可能有人需要

- nasir taha

Answer 3

我的错误是：我在通过 AJAX 加载下拉列表项之前就初始化了 Semantic UI 下拉框。解决方案是：在 AJAX 加载过程之后初始化下拉框。

- user4144415

---

很棒，它解决了你的问题，但并非总是可能的，因为有些情况下需要稍后设置值。 - Konrad Höffner

Answer 4

fomantic-ui

此为知名框架Semantic-UI的官方社区分支(fomantic-ui)，因Semantic-UI已于2018年停止维护。

示例：两个选项(cat, dog)，默认选择dog。

选项1 - 通过隐藏输入

<input type="hidden" name="type" value="dog">

选择下拉菜单可以直接初始化在select上，也可以使用匹配的HTML和一个隐藏输入。

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

<link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.css" rel="stylesheet"/>

<div class="ui dropdown selection">
  <input type="hidden" name="type" value="dog">
  <i class="dropdown icon"></i>
  <div class="default text">Animal</div>
  <div class="menu">
    <div class="item" data-value="cat">Cat</div>
    <div class="item" data-value="dog">Dog</div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.js"></script>

使用set selected API的第二种选项

set selected(value,$selectedItem,preventChangeTrigger)

将值设置为已选中。 https://fomantic-ui.com/modules/dropdown.html#behavior

  let initial_state = "dog";
  $('.dropdown')
    .dropdown('set selected', initial_state);

<link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.css" rel="stylesheet"/>

<div class="ui selection dropdown">
  <input type="hidden" name="pet">
  <i class="dropdown icon"></i>
  <div class="default text">Cat</div>
  <div class="scrollhint menu">
    <div class="item" data-value="cat">Cat</div>
    <div class="item" data-value="dog">Dog</div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.js"></script>

选项3 - 仅使用Javascript初始化

https://fomantic-ui.com/modules/dropdown.html#initializing-with-javascript-only

selected : true

（说明：该文档介绍了如何使用Javascript初始化下拉菜单，代码中的"selected : true"表示默认选中该选项。）

$('.ui.dropdown')
  .dropdown({
    values: [
      {
        name: 'cat',
        value: 'cat'
      },
      {
        name     : 'dog',
        value    : 'dog',
        selected : true
      }
    ]
  })
;

<link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.css" rel="stylesheet"/>

<div class="ui selection dropdown">
  <div class="text"></div>
  <i class="dropdown icon"></i>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.js"></script>

通过选项selected属性选择第四个选项

非API选项。

https://www.w3schools.com/tags/att_option_selected.asp

<link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.css" rel="stylesheet"/>

<select class="ui selection dropdown">
    <option class="item" data-value="cat">Cat</option>
    <option class="item" data-value="dog" selected>Dog</option>
</select >


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.js"></script>

- Ezra Siton