jqueryjquery-ui-multiselect

Dynamically add content in the multiselect dropdown in jquery


I have some doubt on multiple select in dropdown with checkbox. i want to dynamically add the content in drop down whenever i upload a image in jquery.How to refresh dropdown with new data?

$('#listImage').multiselect({});

once i get the new data i tried to refresh the multiselect but that throws error.

 $("#widgetSettingsForm select[multiple]").multiselect('rebuild');

Uncaught Error: no such method 'rebuild' for multiselect widget instance(...)


Solution

  • Use refresh instead of rebuild : http://jsfiddle.net/o7xf9awv/1/

    $("#test001").multiselect('refresh');
    

    $("#test001").multiselect({
      header: false,
      noneSelectedText: "Select"
    });
    var count = 2;
    $("#add").click(function() {
      $("#test001").append('<option value="option5">Option ' + ++count + '</option>');
      $("#test001").multiselect('refresh');
    });
    
    $("#remove").click(function() {
      $("#test001 option:last").remove();
      $("#test001").multiselect('refresh');
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script src="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/1.10/src/jquery.multiselect.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/1.10/jquery.multiselect.css">
    <input type="button" id="add" value="add" />
    <input type="button" id="remove" value="remove last" />
    <br/>
    <select id="test001" multiple="multiple">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>