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

Question

如何设置搜索下拉列表 (select) 表单域的 selected 项？我尝试使用以下 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 前端框架 ;-)

Answer 1

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

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

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

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

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

如果 select 列表的 ID 为 dropdown，您可以：

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

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

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

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

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

Answer 2

我的错误是：我在之前初始化了语义 UI 下拉菜单我通过 AJAX 加载了下拉菜单项。解决方案：在 AJAX 加载过程 AFTER 后初始化 Dropdown。

Answer 3

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

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

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

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

Semantic UI: How to define selected item of search dropdown ("<select>")?

javascript

semantic-ui