<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'> <link href="http://select2.github.io/dist/css/select2.min.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://select2.github.io/dist/js/select2.full.js"></script> <select name="tag_id" class="js-example-basic-hide-search"> <option value="default">Enabled</option> <option value="warning">Disabled</option> <option value="danger">In Trash</option> <option value="info">All</option> </select>

$(document).ready(function () { function formatState (state) { if (!state.id) { return state.text; } var $state = $( '<span class="label label-' + state.element.value.toLowerCase() + '">' + state.text + '</span>' ); return $state; }; //<span class="label label-default">Default</span> // jquery dropdown $(".js-example-basic-hide-search").select2({ minimumResultsForSearch: Infinity, templateResult: formatState }); $(".js-example-basic-hide-search").on("change", function (e) { console.log("val: " + $(this).val()); var $target = $(this).val(); if ($target != 'all') { $('tbody tr').css('display', 'none'); $('tbody tr[data-status="' + $target + '"]').fadeIn('slow'); } else { $('tbody tr').css('display', 'none').fadeIn('slow'); } }); });