jquery.sumoselect - Demo
First import a latest version of jquery in your page. Then the jquery.sumoselect.min.js and its css (sumoselect.css)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.sumoselect.min.js"><script>
<link href="sumoselect.css" rel="stylesheet" />
Simple
Single select.
$('.testselect1').SumoSelect();
Volvo
Multiple select.
$('.testselect2').SumoSelect();
Volvo, Saab
OK
Cancel
Optgroup Support
$('.optgroup_test').SumoSelect();
5 Selected
OK
Cancel
Search Support
$('.search_test').SumoSelect({search: true, searchText: 'Enter here.'});
Aston Martin
Volvo, BMW
OK
Cancel
Saab, Renault
OK
Cancel
With placeholder text
Multiple select.
$('.testselect3').SumoSelect({placeholder: 'This is a placeholder'});
This is a placeholder
OK
Cancel
Preselected and Disabled
Single select.
$('.testselect5').SumoSelect();
Saab
Multiple select.
$('.testselect6').SumoSelect();
Ferrari, Hyundai
OK
Cancel
Show ok cancel in multiselect
$('.testselect7').SumoSelect({ okCancelInMulti: true });
Ferrari, Hyundai
OK
Cancel
Select All
$('.select1').SumoSelect({ okCancelInMulti: true, selectAll: true });
Ferrari, Hyundai
OK
Cancel
$('.select2').SumoSelect({ selectAll: true });
Ferrari
OK
Cancel
Other Examples
$('.testselect8').SumoSelect({ okCancelInMulti: true ,
triggerChangeCombined: false
});
Ferrari, Hyundai
OK
Cancel
Try this one on a mobile.
$('.testselect9').SumoSelect({ okCancelInMulti: true ,
triggerChangeCombined: true,
forceCustomRendering: true
});
Ferrari, Hyundai
OK
Cancel
Live actions on select.
|
|
License
Copyright (c) 2014 Hemant Negi Licensed under the MIT license.