语义UI:如何定义搜索下拉列表的选定项目("<select>")？

Question

如何设置搜索下拉列表(选择)表单字段的选定项？我尝试使用以下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').dropdown('set selected', value);

或传递一个对象(可能对多个选择或开发人员的偏好有用):

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

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

如果选择列表的id为say dropdown,您可以执行以下操作:

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

要设置该值,请说该选项的值为a,您可以执行以下操作:

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

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

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

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>

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

Answer 3

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