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

jQuery带搜索过滤功能的下拉列表框-精品资源网
jQuery带搜索过滤功能的下拉列表框
此内容为免费资源,请登录后查看
0
免费资源

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>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容