下拉选单模糊查询

最新推荐文章于 2022-07-12 15:31:47 发布
最新推荐文章于 2022-07-12 15:31:47 发布
阅读量472 收藏
点赞数
分类专栏： vs2015前端开发 文章标签： html 插件 visual studio 软件 c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rzm000rzm/article/details/52883833
版权

我所用的软件是vs2015

  • 首先要下载插件，然后在HTML页引用
    • 　　插件地址 http://pan.baidu.com/s/1ceLL18

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>下拉选单模糊查询</title>
<meta charset="utf-8" />
<link href="chosen_v1.6.2/docsupport/style.css" rel="stylesheet" />
<link href="chosen_v1.6.2/docsupport/prism.css" rel="stylesheet" />
<link href="chosen_v1.6.2/chosen.css" rel="stylesheet" />
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop {
left: -9000px;
}
</style>
</head>
<body>
<div class="side-by-side clearfix">
<div>
<em>单一选择</em>
<select data-placeholder="你喜欢什么熊？" style="width:350px;" class="chosen-select" tabindex="7">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option selected>大熊猫</option><!--selected为默认选好-->
<option disabled>懒熊</option><!--disabled为不能选择项-->
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
</select>
</div>
<div>
<em>分组单一选择</em>
<select data-placeholder="你最喜欢的球队" style="width:350px;" class="chosen-select" tabindex="5">
<option value=""></option>
<optgroup label="NFC EAST">
<!--分组标题-->
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
</optgroup>
<optgroup label="NFC NORTH">
<option>Chicago Bears</option>
<option>Detroit Lions</option>
<option>Green Bay Packers</option>
<option>Minnesota Vikings</option>
</optgroup>
<optgroup label="NFC SOUTH">
<option>Atlanta Falcons</option>
<option>Carolina Panthers</option>
<option>New Orleans Saints</option>
<option>Tampa Bay Buccaneers</option>
</optgroup>
<optgroup label="NFC WEST">
<option>Arizona Cardinals</option>
<option>St. Louis Rams</option>
<option>San Francisco 49ers</option>
<option>Seattle Seahawks</option>
</optgroup>
<optgroup label="AFC EAST">
<option>Buffalo Bills</option>
<option>Miami Dolphins</option>
<option>New England Patriots</option>
<option>New York Jets</option>
</optgroup>
<optgroup label="AFC NORTH">
<option>Baltimore Ravens</option>
<option>Cincinnati Bengals</option>
<option>Cleveland Browns</option>
<option>Pittsburgh Steelers</option>
</optgroup>
<optgroup label="AFC SOUTH">
<option>Houston Texans</option>
<option>Indianapolis Colts</option>
<option>Jacksonville Jaguars</option>
<option>Tennessee Titans</option>
</optgroup>
<optgroup label="AFC WEST">
<option>Denver Broncos</option>
<option>Kansas City Chiefs</option>
<option>Oakland Raiders</option>
<option>San Diego Chargers</option>
</optgroup>
</select>
</div>
</div>
<div class="side-by-side clearfix">
<div>
<em>多个选择</em>
<select data-placeholder="你喜欢什么熊？" style="width:350px;" multiple class="chosen-select" tabindex="8">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option selected>大熊猫</option>
<option disabled>懒熊</option>
<option selected>马来熊</option>
<option disabled>北极熊</option>
<option>眼睛熊</option>
</select>
</div>
<div>
<em>分组多个选择</em>
<select data-placeholder="你最喜欢的球队" style="width:350px;" class="chosen-select" multiple tabindex="6">
<option value=""></option>
<optgroup label="NFC 东部">
<option>达拉斯牛仔</option>
<option>纽约巨人</option>
<option>费城老鹰</option>
<option>华盛顿红皮</option>
</optgroup>
<optgroup label="NFC 北部">
<option>芝加哥熊</option>
<option>底特律雄狮</option>
<option>绿湾包装工</option>
<option>明尼苏达维京人</option>
</optgroup>
<optgroup label="NFC 南部">
<option>Atlanta Falcons</option>
<option>Carolina Panthers</option>
<option>New Orleans Saints</option>
<option>Tampa Bay Buccaneers</option>
</optgroup>
<optgroup label="NFC WEST">
<option>Arizona Cardinals</option>
<option>St. Louis Rams</option>
<option>San Francisco 49ers</option>
<option>Seattle Seahawks</option>
</optgroup>
<optgroup label="AFC EAST">
<option>Buffalo Bills</option>
<option>Miami Dolphins</option>
<option>New England Patriots</option>
<option>New York Jets</option>
</optgroup>
<optgroup label="AFC NORTH">
<option>Baltimore Ravens</option>
<option>Cincinnati Bengals</option>
<option>Cleveland Browns</option>
<option>Pittsburgh Steelers</option>
</optgroup>
<optgroup label="AFC SOUTH">
<option>Houston Texans</option>
<option>Indianapolis Colts</option>
<option>Jacksonville Jaguars</option>
<option>Tennessee Titans</option>
</optgroup>
<optgroup label="AFC WEST">
<option>Denver Broncos</option>
<option>Kansas City Chiefs</option>
<option>Oakland Raiders</option>
<option>San Diego Chargers</option>
</optgroup>
</select>
</div>
</div>
<div class="side-by-side clearfix">
<div>
<em>单选未找到反馈</em>
<select data-placeholder="搜索一个没有的项" style="width:350px;" class="chosen-select-no-results" tabindex="10">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option>大熊猫</option>
<option>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
</select>
</div>
<div>
<em>多选未找到反馈</em>
<select data-placeholder="搜索一个没有的项" style="width:350px;" multiple class="chosen-select-no-results" tabindex="11">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option>大熊猫</option>
<option>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
</select>
</div>
</div>
<div class="side-by-side clearfix">
<div>
<em>单选可取消选项</em>
<select data-placeholder="你喜欢什么熊？" style="width:350px;" class="chosen-select-deselect" tabindex="12">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option>大熊猫</option>
<option selected>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
</select>
</div>
<div>
<em>不知道啥东西</em>
<select data-placeholder="你喜欢什么熊？" style="width:350px;" class="chosen-select-no-single" tabindex="9">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option selected>大熊猫</option>
<option>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
<option >帕丁顿熊</option>
<option >中国棕熊</option>
<option >日本熊本兄</option>
</select>
</div>
</div>
<div class="side-by-side clearfix">
<div>
<em>选项在右侧</em>
<select data-placeholder="你喜欢什么熊？" style="width:350px;" class="chosen-select chosen-rtl" tabindex="13">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option>大熊猫</option>
<option>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>n>
</select>
</div>
<div>
<em>多选选项在右侧</em>
<select data-placeholder="你喜欢什么熊？" style="width:350px;" multiple class="chosen-select chosen-rtl" tabindex="14">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option>大熊猫</option>
<option>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
</select>
</div> 
</div>
<div class="side-by-side clearfix">
<div>
<em>单选调节宽度</em>
<select data-placeholder="你喜欢什么熊？" class="chosen-select-width" tabindex="15"><!--width定义在下面script中-->
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option>大熊猫</option>
<option>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
</select>
</div>
<div>
<em>多选调节宽度</em>
<select data-placeholder="你喜欢什么熊？" multiple class="chosen-select-width" tabindex="16">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option>大熊猫</option>
<option>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
</select>
</div>
</div>
<div class="side-by-side clearfix">
<div>
<em><label for="single-label-example">点我可以选择</label></em>
<select data-placeholder="你喜欢什么熊？" class="chosen-select" style="width:350px;" tabindex="17" id="single-label-example">
<option value=""></option>
<option>美洲黑熊</option>
<option selected>亚洲黑熊</option>
<option>马熊</option>
<option >大熊猫</option>
<option>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
</select>
</div>
<div>
<em><label for="multiple-label-example">点我可以选择</label></em>
<select data-placeholder="你喜欢什么熊？" multiple class="chosen-select" style="width:350px;" tabindex="18" id="multiple-label-example">
<option value=""></option>
<option>美洲黑熊</option>
<option>亚洲黑熊</option>
<option>马熊</option>
<option selected>大熊猫</option>
<option>懒熊</option>
<option>马来熊</option>
<option>北极熊</option>
<option>眼睛熊</option>
</select>
</div>
</div>

<script src="scripts/jquery-3.1.1.min.js"></script>
<script src="chosen_v1.6.2/chosen.jquery.js"></script>
<script src="chosen_v1.6.2/docsupport/prism.js"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10}, //禁用搜索括值
'.chosen-select-no-results': {no_results_text:'糟糕，什么都没找到！未找到'}, //可以更改返回值：未找到文本
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</body>
</html>

  •  在运行之后，一些反馈不是我想要的，我会在中将数据改为中文。之后的运行的时候会出现乱码，所以还需要一步改变编码操作。 但是vs2015中没有改变编码的工具，所以我们要自己改。
    • 　　

       

 

    •  


大钊啊
关注
专栏目录
下拉框模糊查询
qq_24892029的博客
03-09 1148
1：input 加select标签 //1 初始化时候,先将数据存入数组 var TempArr = [];// 存贮option var SelectObj = document.frm.elements["demo"] /* 先将数据存入数组 */ with (SelectObj){     for (i = 0; i         TempArr[i] =
Excel中的智能模糊查询下拉菜单，比下拉列表强20倍
热门推荐
www_zhishitu_net的博客
03-29 1万+
我们前面刚讲到利用数据有效性制作三级下拉菜单，很多读者学完后马上应用到工作中了 但是如果需要同时录入多个选项的怎么办？例如在一个单元格内需要录入多个采购物品，这样就无法用数据有效性。 但是excel中却有一个好用的功能完美解决了这个问题，看下图演示。 558课！办公必备！Excel小白蜕变大神全程精品课 | 知识兔 （动图演示） 其实这么好用的功能是过儿用VBA制作的，其实很简单，只要会复制粘贴你也能添加该功能。 558课！办公必备！Excel小白蜕变大神全程精品课
下拉模糊查询
08-26
下拉模糊查询
进行模糊查询+多选功能的下拉框（select） 模糊加载
05-26
自写的一个能进行 模糊查询+多选的下拉框（select） 本人亲测，肯定符合你的要求
js下拉模糊查询
weixin_30340819的博客
11-05 173
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><METAcontent="fason,阿信"name=Author><title>动态提示的下拉框</title><style></style...
下拉模糊查询 带搜索框jQuery
05-04
下拉模糊查询 带搜索框 一个小例子。“搜索”可以使我们更快的找到某一个关键词或者某一个商品，所以“模糊查询”和“下拉匹配”也成了前端必备的一个小技能，开门见山，希望对朋友们有帮助。
Javafx之网格布局，下拉框，单（多）选框
m0_67368271的博客
05-21 2225
一、连接数据库 帮助类 package com.zking.util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; /** * 连接数据库 帮助类 * @author Administrator * */ public class DBHelper { //注册驱动 static { tr
elementUI多选框+下拉框联动 默认值
BIG_PEI的博客
07-20 599
<el-dialog :title="form.title" :visible.sync="form.coordinateShow"> <el-form ref="form" label-width="80px" style="width: 60%"> <el-form-item label="id"> <el-input v-model="fo.
Excel 入门到精通笔记
weixin_62864645的博客
10-24 1109
10.23第一天 1.视图-冻结/拆分 2.排序：1）按照某一列顺序排：不用选中全列，把光标放在列中任意单元格，点排序 2）按照某几列顺序排：排序-自定义排序-添加排序的列，设置排序顺序 3）自定义序列：排序-自定义排序-添加排序的列，设置排序顺序选自定义序列，设置序列 3.筛选：按数字、首字、日期、单元格颜色筛选 4.表设计：套用模板设计表格，光标在表格的右下位置按Tab键，可以插入下一行， 插入切片：表设计-插入切片，可以筛选连续...
用Python写游戏脚本原来这么简单
shunshunss的博客
12-30 1万+
游戏这种东西完全可以用写代码的方式帮我们自动完成。游戏脚本其实并不高深，最简单的体验方法就是下载一个Airtest了，直接截几个图片，写几层代码，就可以按照自己的逻辑玩儿游戏了。 当然，本篇文章不是要讲Airtest这个怎么用，而是用原始的python+opencv来实现上面的操作。 这两天我写了一个公主连结刷初始号的程序，也不能算写游戏脚本的老手，这篇文章主要是分享一些基础的技术和使用上的心得吧。 准备工作 首先，我们要完成以下准备。 安卓设备一个：模拟器或者真机都可以。 安装ADB，并添
下拉模糊查询实例
10-19
最近做了一个功能，在下拉框中有上千条选项，这种情况下肯定不能一个一个地去找，所以在下拉框中添加了一个模糊查询的功能，很多资料都有各种问题，下面是我实现的完整的实例：
下拉框可输入模糊查询，自动匹配
06-04
下拉框模糊查询； 可以输入可以直接选择，自动匹配； 非常简单，快捷
下拉列表完全模糊匹配
12-07
html页面要用到下拉列表时，可以根据输入的内容，完全匹配关键字，实现模糊查找！直接引用js和css就搞定了
select多选下拉列表+模糊查询功能.rar
03-11
select多选下拉列表+模糊查询功能，亲测完整，有ASP和HTML样例，代码完整。 Insert title here ----请选择---- ----量表一---- ----量表二---- ----量表三---- ----量表四---- $(function(){ $("#table_id").comboSelect(); });
完整JSP模糊查询完整JSP模糊查询
02-22
完整JSP模糊查询，五种模糊查询
模糊查询下拉列表
文艺小木头的博客
11-13 1387
前端jsp 监听input文本变化需要 oninput="OnInput (event)" onpropertychange="OnPropChanged (event)"方法 &lt;div class="row topdis"&gt; &lt;div class="col-md-2" style="width: 150px"&gt;
select下拉框带模糊查询_SQL简单查询
weixin_39700394的博客
12-05 1264
SQL系统学习第二课：一、学习目的：1.掌握SQL的基本查询语句及指定查询条件语句。2.学会SQL的两种注释方法。3.了解SQL语句的书写和运行规则及书写中的注意事项。4.掌握SQL的几种运算符（算数、比较、逻辑）。5.掌握字符串的模糊查询（like，%，_）二、学习工具1.mysql+navicat+sqlzoo（习题网站）三、学习框架（思维导图）：四、学习内容：1.sql的基本查询语句及指定查...
jsp实现下拉框选择加搜索框模糊查询
ZgaoYi的博客
07-12 4094
jsp实现下拉框选择加搜索框模糊查询 实现下拉框可输入，可搜索
JSP数据维护（模糊查询）
holy_xx的博客
03-30 529
上一篇文章我们写到了数据的基础增删改查（3.29的文章） 模糊查询代码如下： request.setCharacterEncoding("utf-8");--设置编码，解决乱码问题
JavaScript实现文本框模糊查询与选项下拉功能
在这个文本中，我们探讨的是一个基于JavaScript实现的简单模糊查询功能，适用于一个带有输入框和下拉菜单的选择器。该查询功能主要应用于一个查询框（`.winput`），用户可以在其中输入资源名称，而下拉菜单（`....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值