MultiSelect Widget - Add An Option

Uses Refresh Method

by chayacooper

HTML

<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/style.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<div>    
  <br/>
    Add an item:
	<input type="text" id="newItem" />
	<input type="button" class="add" value="Add" />	
	<label> <input type="checkbox" id="selected" /> Selected?</label>
	
    <br/> <br/> <br/>   
    <select name="example-refresh" id="example1" class="rules_multi" multiple="multiple" style="width:12em">
	<option value="foo">foo</option>
	<option value="bar">bar</option>
	<option value="baz">baz</option>
	</select>
    
</div>

JavaScript

$(function () {
    $(".rules_multi").multiselect();
});


$(function () {
    $(".add").click(function () {
      var el       = $(this).siblings('select').multiselect(),
          selected = $(this).siblings('label').find('input[type="checkbox"]'),
          newItem  = $(this).prev('input'),
          v        = newItem.val(), 
          opt      = $('<option />', { value: v, text : v });

      if (selected.is(':checked')) {
          opt.prop('selected', true);
      }
      opt.appendTo(el);
      el.multiselect('refresh');
    });
});