注册 登录 充值会员 退出
毕业设计 PHP源码
充值

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

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-02-16
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>