Chosen vs Select2 vs DropKick vs selectBox vs ddSlick (v9)

Revision 9 of this benchmark created by Carney on


Description

Compare Chosen, Select2, selectBox, DropKick, and ddSlick for lists with large number of items

Preparation HTML

<link href="//raw.github.com/harvesthq/chosen/master/chosen/chosen.css" rel="stylesheet"/>
<link href="//raw.github.com/ivaynberg/select2/master/select2.css" rel="stylesheet"/>
<link href="//raw.github.com/JamieLottering/DropKick/master/dropkick.css"
rel="stylesheet"/>
<link href="//raw.github.com/claviska/jquery-selectBox/master/jquery.selectBox.css" rel="stylesheet"/>

<div id="container"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js"></script>
<script src="//raw.github.com/ivaynberg/select2/master/select2.js"></script>
<script src="//raw.github.com/JamieLottering/DropKick/master/jquery.dropkick-1.0.0.js"></script>
<script src="//raw.github.com/claviska/jquery-selectBox/master/jquery.selectBox.min.js"></script>
<script src="http://dl.dropbox.com/u/40036711/Scripts/jquery.ddslick.min.js"></script>

Setup

select = $('<select></select>').appendTo("#container");
    var i, length = 4;
    for (i = 0; i < length; i++) {
      select.append('<option value="' + i + '">' + i + '</option>');
    }

Teardown


    select.remove();
    $("#container").empty();
  

Test runner

Ready to run.

Testing in
TestOps/sec
Chosen
select.chosen();
ready
Select2
select.select2();
ready
DropKick
select.dropkick();
ready
selectBox
select.selectBox();
ready
ddSlick
//Dropdown plugin data
var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        selected: true,
        description: "Description with LinkedIn",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
    },
    {
        text: "Foursquare",
        value: 4,
        selected: false,
        description: "Description with Foursquare",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
    }
];

$('#container').ddslick({
    data: ddData,
    width: 300,
    imagePosition: "left",
    selectText: "Select your favorite social network",
    onSelected: function (data) {
        console.log(data);
    }
});
 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 2: published by Henrik Pettersson on
  • Revision 3: published by Carney on
  • Revision 4: published by Carney on
  • Revision 5: published by Carney on
  • Revision 6: published by Carney on
  • Revision 7: published by Carney on
  • Revision 8: published by Carney on
  • Revision 9: published by Carney on
  • Revision 10: published by Carney on
  • Revision 11: published by Carney on
  • Revision 12: published by Carney on
  • Revision 13: published by Carney on
  • Revision 14: published by Carney on
  • Revision 15: published on
  • Revision 16: published by Greg Franko on
  • Revision 21: published on
  • Revision 23: published by Greg Franko on
  • Revision 28: published on