Skip to content

Instantly share code, notes, and snippets.

@cwardzala
Created August 27, 2012 19:43
Show Gist options
  • Save cwardzala/3491682 to your computer and use it in GitHub Desktop.
Save cwardzala/3491682 to your computer and use it in GitHub Desktop.
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Multiple Select</label>
<div class="controls">
<select data-select="multiple" multiple="multiple">
<option>blah</option>
<option>poop</option>
<option>blah</option>
<option>poop</option>
<option>blah</option>
<option>poop</option>
</select>
</div>
</div>
</form>
$('[data-select="multiple"]').each(function () {
var $select = $(this)
$mselect = $('<div class="mselect"></div>');
$select.hide();
var $opts = $select.find('option');
$select.after($mselect);
$opts.each(function (i, opt) {
$mselect.append('<a href="#" class="mselect-opt" data-idx="' + i + '"><i class="icon-ok icon-white pull-right"></i>' + $(opt).text() + '</a>');
});
});
$(document).on('click', '.mselect-opt', function (event) {
event.preventDefault();
var $parent = $(this).parents('.mselect'),
$opts = $parent.find('.mselect-opt'),
$ogselect = $parent.prev('select'),
idx = $(this).data('idx'),
$ogopt = $ogselect.find('option').eq(idx);
$(this).toggleClass('selected');
var val = !$ogopt.is(':selected') ? 'selected' : '';
$ogopt.prop('selected', val);
});
body {
padding:1em;
}
.mselect {
display: inline-block;
padding: 4px 0;
margin-bottom: 9px;
font-size: 14px;
line-height: 20px;
color: #555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
height: auto;
width: 220px;
background-color: white;
border: 1px solid #BBB;
max-height:80px;
overflow-y:scroll;
}
.mselect-opt {
display:block;
cursor:pointer;
padding:0 6px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mselect-opt.selected {
color:white;
background:dodgerblue;
}
.mselect-opt i {
display:none;
margin-top:2px;
}
.mselect-opt.selected i {
display:block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment