jQuery下拉选带搜索功能

最新推荐文章于 2024-07-22 03:49:38 发布

linsa_pursuer

最新推荐文章于 2024-07-22 03:49:38 发布

阅读量2.9k

点赞数

分类专栏： JSP应用文章标签： jQuery下拉选 searchableSelect chosen

本文链接：https://blog.csdn.net/linsa_pursuer/article/details/84644242

版权

JSP应用专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.searchableSelect下拉选（搜索形式为%reg%）

注意点：用js加载下拉框，有两种实现方式

（1）js加载完后给下拉选调$('select').searchableSelect();

（2）js加载前调则js加载后需重新加载select

//1 执行完毕后去掉之前生成的div
$("#choose + div").remove();
//2 重新生成一个div
$('#choose').searchableSelect({
afterSelectItem: function(){//此方法是点击后激活事件 :关闭下拉框
                   $('.searchable-select-dropdown').addClass('searchable-select-hide');
               }
           });
//3 生成的同时打开下拉框
$('.searchable-select-dropdown').removeClass('searchable-select-hide');

index.html代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>带搜索框的jQuery下拉框美化插件 searchableSelect</title>
    <link href="jquery.searchableSelect.css" rel="stylesheet" type="text/css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.searchableSelect.js"></script>
  </head>
  <body>
    <select id="choose">
      <option value="jQuery插件库">jQuery插件库</option>
      <option value="BlackBerry">BlackBerry</option>
      <option value="device">device</option>
      <option value="with">with</option>
      <option value="entertainment">entertainment</option>
      <option value="and">and</option>
      <option value="social">social</option>
      <option value="networking">networking</option>
      <option value="apps">apps</option>
      <option value="or">or</option>
      <option value="apps">apps</option>
      <option value="that">that</option>
      <option value="will">will</option>
      <option value="boost">boost</option>
      <option value="your">your</option>
      <option value="productivity">productivity</option>
      <option value="Download">Download</option>
      <option value="or">or</option>
      <option value="buy">buy</option>
      <option value="apps">apps</option>
      <option value="from">from</option>
      <option value="Afbb">Afbb</option>
      <option value="Akademie">Akademie</option>
      <option value="Berlin">Berlin</option>
      <option value="reviews">reviews</option>
      <option value="by">by</option>
      <option value="real">real</option>
    </select>
    <script>
		$(function(){
			$('select').searchableSelect();
			$('#choose').append("<option value='1'>湖北</option>");
			$('#choose').append("<option value='2'>河北</option>");
			
			
			//1 执行完毕后去掉之前生成的div
            $("#choose + div").remove();
            //2 重新生成一个div 
            $('#choose').searchableSelect({
                afterSelectItem: function(){//此方法是点击后激活事件 :关闭下拉框
					$('.searchable-select-dropdown').addClass('searchable-select-hide');
				}
			});
            //3 生成的同时打开下拉框
            $('.searchable-select-dropdown').removeClass('searchable-select-hide');

		});
    </script>
  </body>
</html>

使用插件链接如下：

jQuery-searchableSelect所需js及css

2.chosen.jquery下拉选（搜索形式为reg%）

注意点：用js加载下拉框，有两种实现方式

（1）js加载完后给下拉选调$('select').chosen();

（2）js加载前调则js加载后需重新加载select

$("#choose").trigger("liszt:updated");

index.html代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>带搜索框的jQuery下拉框美化插件 searchableSelect</title>
    <link href="css/chosen.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/chosen.jquery.js"></script>
  </head>
  <body>
    <select id="choose" data-placeholder="请选择" style="width:200px;" tabindex="2">
	<option value=""></option>
      <option value="jQuery插件库">jQuery插件库</option>
      <option value="BlackBerry">BlackBerry</option>
      <option value="device">device</option>
      <option value="with">with</option>
      <option value="entertainment">entertainment</option>
      <option value="and">and</option>
      <option value="social">social</option>
      <option value="networking">networking</option>
      <option value="apps">apps</option>
      <option value="or">or</option>
      <option value="apps">apps</option>
      <option value="that">that</option>
      <option value="will">will</option>
      <option value="boost">boost</option>
      <option value="your">your</option>
      <option value="productivity">productivity</option>
      <option value="Download">Download</option>
      <option value="or">or</option>
      <option value="buy">buy</option>
      <option value="apps">apps</option>
      <option value="from">from</option>
      <option value="Afbb">Afbb</option>
      <option value="Akademie">Akademie</option>
      <option value="Berlin">Berlin</option>
      <option value="reviews">reviews</option>
      <option value="by">by</option>
      <option value="real">real</option>
    </select>
    <script>
		$(function(){
			$('select').chosen();
			$('#choose').append("<option value='1'>湖北</option>");
			$('#choose').append("<option value='2'>河北</option>");
			
			
			$("#choose").trigger("liszt:updated");

		});
    </script>
  </body>
</html>

使用插件链接如下：

chosen.jquery所需js及css

目录截图如下：

img下只有一张图片，即为

chosen-sprite.png（样式截图如下，图片直接放出不清晰变形了，可以去插件链接里下载）

linsa_pursuer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery下拉选带搜索功能

1.searchableSelect下拉选（搜索形式为%reg%）注意点：用js加载下拉框，有两种实现方式（1）js加载完后给下拉选调$('select').searchableSelect();（2）js加载前调则js加载后需重新加载select //1 执行完毕后去掉之前生成的div $("#choose + div").remove...
复制链接

扫一扫