Question

我们有一个Bootstrap 3下拉菜单（标准组件），我们想以编程方式更改所选项目。我们尝试修改数据选择的属性，但更改不会反映在UI中。

是否有标准方法以编程方式修改Bootstrap下拉菜单中选择的项目？

Answer 1

使用类似

的jquery

 $('#item').on('selected', function(){
//do your changes...
}

编辑：

必须触发选择，例如加载页面时：

$(function()
{
    $('#item').select();
});

Answer 2

我一直在寻找一种方法来做到这一点 - 我是完全失明还是文档完整地跳过这个？我最终做的是使用相应链接元素的.click()方法。

我的HTML看起来像这样：

<div class="dropdown">
  <a href="#" id="dd-toggle" data-toggle="dropdown" class="dropdown-toggle">...</a>
  <ul id="dd-ul" class="dropdown-menu user-menu">
    <li><a href="#" id="dd-opt1" role="menu" value="opt1">...</a></li>
    <li><a href="#" id="dd-opt2" role="menu" value="opt2">...</a></li>
    <li><a href="#" id="dd-opt3" role="menu" value="opt3">...</a></li>
    ...
  </ul>
</div>

现在，如果要选择的下拉项目的所需value存储在某个变量ddselected中，可以通过以下方式选择该下拉项：

$("#dd-" + ddselected).click();

Answer 3

如果您要将值传递给某个函数而您只想根据下拉列表中的文本值进行选择，请尝试以下操作：

 function yourAutoSelectFunc(YourTextValue) {
     $('#YourDropDownUL').find('li:contains("' + YourTextValue + '")').click();
 }

以编程方式选择Bootstrap的下拉菜单项

3 个答案: