Twitter Bootstrap Question posted in

Twitter bootstrap – trying to add an option to a dropdown list and have it displayed in the dropdown

As the title says, I’m trying to add an option to a dropdown and have it displayed in the list.

Here’s a sample example (I maybe old but this is my first stab at the world of web)

When you press the add button a new option should appear in the list “Pasta”, but it is not being displayed. If you “select all” and press the “Products” button the alert displays “Pasta”.

I’ve spent over a week looking for a solution and I am here out of desperation!

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

Please feel free to reduce the problem (but not too much) and please don’t get too esoteric.

Thanks in advance

Tags:

2

Answers


  1. 0

    The problem is that when you initialise your multiselect, it appends a hidden DOM element class="multiselect-container dropdown-menu" to your productlist.

    This new element is responsible for displaying items in your list.

    You need to rebuild your multiselect after adding the new option.

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

    I would highly recommend using Firebug or Chrome’s dev tools to view your DOM.

    Login or Signup to reply.
  2. 0

    Since you’re using bootstrap multi-select , everytime you add a new option element you need to “rebuild” the element. You can check that method on the documentation right here: http://davidstutz.github.io/bootstrap-multiselect/#methods

    So the code would be something like this:

    $('#addButton').click(function(){
        $("#productsList").append(new Option("Pasta", "6"));
        $('#productsList').multiselect('rebuild');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search