{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

jQuery带搜索过滤功能的下拉列表框

这是一款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>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载


米微资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery带搜索过滤功能的下拉列表框
喜欢 ()分享 (0)