multiselect blog post demo

by Steven Lacks

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css">
<script src="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/master/src/jquery.multiselect.js"></script>
<link rel="stylesheet" href="http://erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
   <input type='text' id='txt'>
    <select multiple id='sel'>
     <option value='test1'> test1 </option>
     <option value='test2'> test2 </option>
     <option value='test3'> test3 </option>
     <option value='test4'> test4 </option>
     <option value='test5'> test5 </option>
     <option value='test6'> test6 </option>
    </select>

CSS

body {
    font-size: 13px;
}

JavaScript

$("#txt").change(function(e){
    var ar = $(this).val().split(",");
    $("#sel option").each(function(){
        if(ar.indexOf($(this).val()) != -1)
           $(this).attr("selected","selected");
    });
  });
$('#sel').change(function(){
    $('#txt').val($('#sel').val());
});