语义 UI：如何定义搜索下拉列表的选定项（“<select>”）？答案

【问题标题】：Semantic UI: How to define selected item of search dropdown ("<select>")?语义 UI：如何定义搜索下拉列表的选定项（“<select>”）？
【发布时间】：2015-06-10 16:14:14
【问题描述】：

如何设置搜索下拉（选择）表单字段的选定项？我用下面的 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 前端框架；-)

【问题讨论】：

不，那也不行……

标签： javascript semantic-ui

【解决方案1】：

对于语义 UI 框架，您应该在此处查阅指南：dropdown behavior。这告诉我们进行以下调用：

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

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

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

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

如果选择列表的 id 是 dropdown，你可以这样做：

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

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

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

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

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

【讨论】：

我不要取值，我要设置！
@AntonDachauer 不需要！我没有其他要补充的。很高兴你发现了你的问题。
正确的行为格式是 $('#dropdown').dropdown('set selected', value);
@kmxr 它也可以做 $('#dropdown').dropdown('set selected', ['value_1', 'value_2']) - 只是好奇它是否接受一个数组为了价值？
@Cymen 是的，数组 ['value_1', 'value_2'] 确实有效。它是累积的，所以要重置你需要 $('#dropdown').dropdown('clear')

【解决方案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>

也许为时已晚，但有人可能需要它

【讨论】：

【解决方案3】：

我的错误是：我已经初始化了语义 UI 下拉列表之前我已经通过 AJAX 加载了下拉项目。解决方法：AFTER在AJAX加载过程中初始化Dropdown。

【讨论】：

很好，它可以解决您的问题，但这并不总是可行的，因为有些用例需要稍后设置值。