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

时间:2015-06-10 16:14:15

标签: javascript semantic-ui

如何设置搜索下拉列表(选择)表单字段的选定项?我尝试使用以下jQuery / JavaScript代码: if(等于= 0){     $('#sj_company')。html($('#sj_company')。html()+'&lt; option value =“'+ key +'”selected =“selected”&gt;'+ data [key] +' &LT; /选项&GT;');     $('。searchdropdown')。dropdown('set selected',data [key]); } else {     $('#sj_company')。html($('#sj_company')。html()+'&lt; option value =“'+ key +'”&gt;'+ data [key] +'&lt; / option&gt; “); } 编辑: 基础是语义ui前端框架;-)

3 个答案:

答案 0 :(得分:28)

对于语义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

答案 1 :(得分:5)

您可以通过设置带有语义下拉列表的隐藏值输入来简单地设置默认值:

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

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

答案 2 :(得分:3)

我的错误是:我已经初始化了语义UI下拉之前我通过AJAX加载了下拉项目。解决方案:初始化下拉 AFTER AJAX加载过程。