Dropdown Select w/ change function - Dropkick & Basic

Removes "_default" from value when user clicks on <select> element

HTML

<script src="http://jamielottering.github.com/DropKick/js/jquery.dropkick.1-0.1.js"></script>
Select Value Here <i>(Dropkick styled select element)</i>:<br />
<div style="margin-top: 10px; margin-bottom: 30px">
    <select name="Select1" id="Select1" class="dropkick">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected="selected">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>  
</div>
<br/>
<div style="margin-top: 30px; margin-bottom: 50px">
    Value Set Here:<br />
    <select name="Select2" id="Select2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3_default" selected="selected">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>         
<button onclick="alert($('#Select2').val());">Get Value</button>    
</div>

CSS

* {}
/***** Begin Theme, feel free to edit in here! ******/
  .dk_toggle {height: 18px;}


.account_fields .dk_container {background-color: #ffffff; white-space:nowrap; font: .95em Verdana,Arial,sans-serif; color: #808080;  }
.account_fields .dk_container a, .account_fields .dk_options a {color: #808080;  }

/* One container to bind them... */  

.dk_container {
  background-color: #ffffff;  
  font: 7.5pt Verdana,Arial,sans-serif;    
white-space:nowrap;   
}

  .dk_container a {
    cursor: pointer;
    text-decoration: none;
    color: #555555;
  }

 /* The dropdown items */
  .dk_options a {
    background-color: #ffffff ;  
     padding:1px 0px 1px 0px;       
text-indent: 4.5px;
    margin: 0;
     color: #555555; 
  }
  
  .dk_options li:last-child a   {
      padding:1px 0px 2px 0px;  
text-indent: 4.5px;
      margin: 0;
  }
  
  .dk_options a:hover, .dk_option_current a {
    color: #212121;
    text-decoration: none;        
    background-color: White;
    border-bottom-color: #999999;
    font-weight:bold;      
  }
    
/* Opens the dropdown and holds the menu label */
.dk_toggle {  
  background-image: url('images/arrow1.png');
  background-repeat: no-repeat;
  background-position: 97.5% center; 
  border: 1px solid red;
  color: #555555; 
  line-height: 18px;  
text-indent: 4.5px; 
  padding:0px 0px 0px 0px ;
  border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
}

.dk_toggle:hover   { border-color: #999999;  }
  
  /* Applied when the dropdown is focused */
.dk_focus .dk_toggle  {border-color: #999999;  }

.dk_open .dk_toggle {
    background-color: #ffffff ;
    border-color: #999999;
    color: #212121;    
  }

/* Inner container for options, this is what makes the scrollbar possible. */
.dk_options_inner {
  color: #555555;
  max-height: 250px;  
 list-style: none;
  margin: 0;
    padding:0; 
    border: 1px solid #999999;
    border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:...

JavaScript

// Helper function that removes "_default" from the end of the
// option values for the given select element.
function removeDefaultFromSelect($select) {
    $select.find('option[value$=_default]').prop('value', function(i, value){ return value.replace(/_default$/g, '');
    });
}

$('#Select1').dropkick({
    change: function(value) {
        var $select2 = $('#Select2');
        removeDefaultFromSelect($select2);
        $select2.val(value);
    }
});