title: MultiSelect Widget doesn't remove pre-selected options with this 'open' function
body: <p>When I add this function, the <a href="http://www.erichynds.com/blog/jquery-ui-multiselect-widget" rel="nofollow">jQuery UI MultiSelect Widget</a> no longer removes a pre-selected option when it's unselected. How can I get this function to work without losing the ability to unselect an option?</p>
  
  <p>A fiddle demonstrating the problem is available here: <a href="http://jsfiddle.net/chayacooper/Mp2bK/10/" rel="nofollow">http://jsfiddle.net/chayacooper/Mp2bK/10/</a></p>
  
  <p>JS</p>
  
  <pre><code>$(function () {   
      $(".example").multiselect({
          open: function (event, ui) {
              var option = $(this).find("option[value*=default]");
              option.attr('value', option.attr('value').replace(/_default/g, ''));
          }
      });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;select name="example" class="example" multiple="multiple"&gt;  
      &lt;option value="0"&gt;$0&lt;/option&gt;
      &lt;option value="50_default" selected="selected"&gt;$50&lt;/option&gt;
      &lt;option value="100"&gt;$100&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I am pre-selecting the most commonly chosen options for apx. 300 Select elements, and am using this function in order to differentiate between when those values are still in their initial pre-selected/default state vs. when a user has actively chosen that value by clicking on the form element (indicating that they made an active decision to leave it set to that value). </p>