skip to Main Content

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>
   <title>Simple List Example</title>

   <script src=""></script>
   <link href="" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src=""></script>
   <link href="" rel="stylesheet" type="text/css" />
   <script src="" type="text/javascript"></script>

      $(document).ready(function() {
            includeSelectAllOption: true

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

            $("#productsList").append(new Option("Pasta", "6"));



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

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

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


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

Thanks in advance



  1. 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.

            $("#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. 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:

    So the code would be something like this:

            $("#productsList").append(new Option("Pasta", "6"));
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top