title: Dual listbox how to reset list
body: <p>I have implemented dual listbox using the tutorial at <code>
  </code><a href="http://www.jqueryscript.net/form/Responsive-jQuery-Dual-Select-Boxes-For-Bootstrap-Bootstrap-Dual-Listbox.html" rel="nofollow noreferrer">http://www.jqueryscript.net/form/Responsive-jQuery-Dual-Select-Boxes-For-Bootstrap-Bootstrap-Dual-Listbox.html</a></p>
  
  <p>One feature I have to implement is to clear the whole dual list and populate it with another set of data on click of button. How can I achieve this? Thanks in advance for any suggestion.</p>
  
  <p>To populate the list first time:</p>
  
  <pre><code>var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox();   
  demo1.bootstrapDualListbox('refresh');
  </code></pre>
  
  <p>To empty the selected list on click of reset:</p>
  
  <pre><code>var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox();   
  demo1.bootstrapDualListbox('destroy', true);
  </code></pre>
  
  <p>To repopulate the list on click of reset:</p>
  
  <pre><code>var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox();   
  demo1.bootstrapDualListbox('refresh');
  </code></pre>
  
  <p>After doing this i only see one box with all the unselected items and the other box which show selected items have dissappeared.</p>