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

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

javascript jquery

Javascript 正在尝试向下拉列表中添加选项，并将其显示在下拉列表中,javascript,jquery,Javascript,Jquery,正如标题所说，我试图在下拉列表中添加一个选项，并将其显示在列表中下面是一个示例（我可能很老了，但这是我第一次尝试网络世界）按下“添加”按钮时，“意大利面”列表中会出现一个新选项，但不会显示该选项。如果您“全选”并按下“产品”按钮，则警报显示“意大利面” 我花了一个多星期的时间寻找解决方案，我在这里是出于绝望 <!DOCTYPE html> <html> <head> <title>Simple List Example</title

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

下面是一个示例（我可能很老了，但这是我第一次尝试网络世界）

按下“添加”按钮时，“意大利面”列表中会出现一个新选项，但不会显示该选项。如果您“全选”并按下“产品”按钮，则警报显示“意大利面”

我花了一个多星期的时间寻找解决方案，我在这里是出于绝望

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


简单列表示例
$（文档）.ready（函数（）{
$（“#产品列表”）.multiselect({
includeSelectAllOption:true
});
$（“#selectedButton”）。单击（函数（）{
所选变量=$（“#产品列表选项：所选”）；
var message=“产品：\n”；
已选定。每个（函数（）{
消息+=“”+$（此）.text（）+“”+$（此）.val（）+“\n”；
});
警报（信息）；
});
$（“#添加按钮”）。单击（函数（）{
$（“#产品列表”）。追加（新选项（“面食”、“6”）；
});
});
谷类食品
软饮料
史泰博
沙拉酱
冰淇淋

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

提前感谢

问题在于，当您初始化multiselect时，它会将一个隐藏的DOM元素

class=“multiselect container dropdown menu”

附加到产品列表中

这个新元素负责显示列表中的项目

添加新选项后，需要重新生成multiselect

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

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

问题是，当您初始化multiselect时，它会在产品列表中附加一个隐藏的DOM元素

class=“multiselect container dropdown menu”

这个新元素负责显示列表中的项目

添加新选项后，需要重新生成multiselect

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

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

因为您使用的是引导multi-select，所以每次添加新的option元素时都需要“重建”元素。您可以在此处的文档中查看该方法：

所以代码应该是这样的：

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

由于您使用的是bootstrap multi-select，因此每次添加新的option元素时，都需要“重建”该元素。您可以在此处的文档中查看该方法：

所以代码应该是这样的：

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