在下拉菜单中设置所选项目

Question

我需要在 jquery 中设置我的下拉菜单的选定项，但我无法使其工作。

我的下拉代码如下所示：

<button type="button" id="aktiv" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  Aktiv <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
 <li><a href="#">Aktiv</a></li>
 <li><a href="#">Inaktiv</a></li>
</ul>

Answer 1

我对你的 'dropdown menu' 有点困惑。通常有人会以这种方式制作...

<select class="dropdown-menu">
    <option value="Aktiv"> Aktiv </option>
    <option value="Inaktiv"> Inaktiv </option>
</select>

如果这是您想要的下拉菜单类型，您可以使用...设置所选值...

$(".dropdown-menu").val("Aktiv");

Answer 2

下面的函数可以用来设置菜单的文本。它还设置按钮元素的值，以便您可以使用 $('#aktiv').val().

检索它

function setAktivMenu(text) {
    $('#aktiv').val(text).html(function(i, html) {
        return text + html.slice(html.indexOf(' <'));
    });
}

您可以像这样调用设置菜单文本的函数：

setAktivMenu('Inaktiv');

您还可以为菜单选项设置事件处理程序，以便在单击它们时更改菜单文本：

$('#aktiv + .dropdown-menu').on('click', 'li>a', function() {
    setAktivMenu($(this).text());
});

jsfiddle

在下拉菜单中设置所选项目

Set selected item in dropdown-menu

jquery

drop-down-menu

twitter-bootstrap-3