这是一款jQuery实现带搜索过滤功能的下拉列表框,可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择。
JS代码
<script src=\"js/jquery-1.11.0.min.js\" type=\"text/javascript\"></script> <script src=\"js/fm.selectator.jquery.js\"></script> <script> $(function () { var $activate_selectator1 = $(\'#activate_selectator1\'); $activate_selectator1.click(function () { var $select1 = $(\'#select1\'); if ($select1.data(\'selectator\') === undefined) { $select1.selectator({ labels: { search: \'Search here...\' } }); $activate_selectator1.val(\'destroy selectator\'); } else { $select1.selectator(\'destroy\'); $activate_selectator1.val(\'activate selectator\'); } }); $activate_selectator1.trigger(\'click\'); var $activate_selectator2 = $(\'#activate_selectator2\'); $activate_selectator2.click(function () { var $select2 = $(\'#select2\'); if ($select2.data(\'selectator\') === undefined) { $select2.selectator({ useDimmer: true }); $activate_selectator2.val(\'destroy selectator\'); } else { $select2.selectator(\'destroy\'); $activate_selectator2.val(\'activate selectator\'); } }); $activate_selectator2.trigger(\'click\'); var $activate_selectator3 = $(\'#activate_selectator3\'); $activate_selectator3.click(function () { var $select3 = $(\'#select3\'); if ($select3.data(\'selectator\') === undefined) { $select3.selectator({ useSearch: false }); $activate_selectator3.val(\'destroy selectator\'); } else { $select3.selectator(\'destroy\'); $activate_selectator3.val(\'activate selectator\'); } }); $activate_selectator3.trigger(\'click\'); var $activate_selectator4 = $(\'#activate_selectator4\'); $activate_selectator4.click(function () { var $select4 = $(\'#select4\'); if ($select4.data(\'selectator\') === undefined) { $select4.selectator({ showAllOptionsOnFocus: true }); $activate_selectator4.val(\'destroy selectator\'); } else { $select4.selectator(\'destroy\'); $activate_selectator4.val(\'activate selectator\'); } }); $activate_selectator4.trigger(\'click\'); var $activate_selectator5 = $(\'#activate_selectator5\'); $activate_selectator5.click(function () { var $select5 = $(\'#select5\'); if ($select5.data(\'selectator\') === undefined) { $select5.selectator({ useSearch: false }); $activate_selectator5.val(\'destroy selectator\'); } else { $select5.selectator(\'destroy\'); $activate_selectator5.val(\'activate selectator\'); } }); $activate_selectator5.trigger(\'click\'); var $activate_selectator6 = $(\'#activate_selectator6\'); $activate_selectator6.click(function () { var $select6 = $(\'#select6\'); if ($select6.data(\'selectator\') === undefined) { $select6.selectator({ showAllOptionsOnFocus: true, keepOpen: true }); $activate_selectator6.val(\'destroy selectator\'); } else { $select6.selectator(\'destroy\'); $activate_selectator6.val(\'activate selectator\'); } }); $activate_selectator6.trigger(\'click\'); }); </script>
暂无评论内容