首页 前端知识 jQuery插件:jQuery-searchableSelect可搜索下拉框

jQuery插件:jQuery-searchableSelect可搜索下拉框

2024-06-14 09:06:52 前端知识 前端哥 732 828 我要收藏

效果如下:

下载地址:带搜索框的jQuery下拉框美化插件 searchable

1 引入

    <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>

2 html页面

    <select>
      <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>

3 编写jquery脚本

		$(function(){
			$('select').searchableSelect();
		});

完整代码如下:

<!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>
      <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();
		});
    </script>
  </body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12077.html
标签
评论
发布的文章

JQuery函数 | 选择器 | 事件

2024-06-20 00:06:11

双X轴的Echarts图

2024-06-20 00:06:08

在Vue3中使用echarts图表

2024-06-20 00:06:07

将echarts封装为js文件

2024-06-20 00:06:04

利用Echarts画地图和飞线

2024-06-20 00:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!