Question

正如标题所示，我正在尝试在下拉列表中添加一个选项并将其显示在列表中。

这是一个示例（我可能已经老了，但这是我对网络世界的第一次尝试）

当您按下添加按钮时，新的选项应出现在“Pasta”列表中，但不会显示。如果您“全选”并按“产品”按钮，则警报会显示“Pasta”。

我花了一个多星期的时间寻找解决方案，我绝望了！

<!DOCTYPE html>
<html>
<head>
   <title>Simple List Example</title>

   <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
   <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
   <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
   <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

   <script>
      $(document).ready(function() {
         $("#productsList").multiselect({
            includeSelectAllOption: true
         });

         $("#selectedButton").click (function() {
            var selected = $("#productsList option:selected");
            var message = "Products:\n";
            selected.each(function () {
               message += "   " + $(this).text() + " " + $(this).val() + "\n";
            });
            alert(message);
         });

         $('#addButton').click(function(){
            $("#productsList").append(new Option("Pasta", "6"));
         });
      });
   </script>

</head>

<body>

   <select id="productsList" multiple="multiple">
      <option value="1">Cereal</option>
      <option value="2">Soft Drinks</option>
      <option value="3">Staples</option>
      <option value="4">Salad Dressing</option>
      <option value="5">Ice Cream</option>
   </select>

   <input type="button" id="selectedButton" value="Products"/>

   <input type="button" id="addButton" value="Add"/>

</body>
</html>

请随意减少问题（但不要太多），请不要太深奥。

提前致谢

Answer 1

问题在于，当您初始化多选时，它会将隐藏的DOM元素class="multiselect-container dropdown-menu"附加到您的产品列表中。

此新元素负责显示列表中的项目。

添加新选项后，您需要重建多选项。

$('#addButton').click(function(){
        $("#productsList").append(new Option("Pasta", "6")).multiselect("rebuild");
});

我强烈建议您使用Firebug或Chrome的开发工具来查看您的DOM。

Answer 2

由于您正在使用bootstrap multi-select，因此每次添加新选项元素时都需要“重建”该元素。您可以在此处的文档中检查该方法：http://davidstutz.github.io/bootstrap-multiselect/#methods

所以代码就是这样：

$('#addButton').click(function(){
        $("#productsList").append(new Option("Pasta", "6"));
        $('#productsList').multiselect('rebuild');
});

尝试向下拉列表添加选项并将其显示在下拉列表中

2 个答案: