MultiSelect click event - to change 'default' value

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>
<form>  
    <select name="example" class="example" multiple="multiple">  
        <option value="0">$0</option>
        <option value="50_default" selected="selected">$50</option>
        <option value="100">$100</option>
        <option value="150">$150</option>
        <option value="200">$200</option>
    </select>
        
    <input type="submit" value="View Values Selected" />
</form>

JavaScript

$(function () {   
    $(".example").multiselect({
        open: function (event, ui) {
            var option = $(this).find("option[value*=default]");
            option.attr('value', option.attr('value').replace(/_default/g, ''));
            // $(".example").multiselect("refresh")            
            $(this).multiselect("refresh");  
        }
    });
});

$('form').submit(function (e) {
    e.preventDefault();
    e.returnValue = false;
    alert($(this).find('select').val())
});