JQuery下拉框模糊查询

合集下载

JQueryselect（下拉框）操作方法汇总

JQueryselect（下拉框）操作⽅法汇总1. 获取选中项：获取选中项的Value值：复制代码代码如下:$('select#sel option:selected').val();或者复制代码代码如下:$('select#sel').find('option:selected').val();获取选中项的Text值：复制代码代码如下:$('select#seloption:selected').text();或者复制代码代码如下:$('select#sel').find('option:selected').text();2. 获取当前选中项的索引值：复制代码代码如下:$('select#sel').get(0).selectedIndex;3. 获取当前option的最⼤索引值：复制代码代码如下:$('select#sel option:last').attr("index")4. 获取DropdownList的长度：复制代码代码如下:$('select#sel')[0].options.length;或者复制代码代码如下:$('select#sel').get(0).options.length;5. 设置第⼀个option为选中值：复制代码代码如下:$('select#sel option:first').attr('selected','true')或者复制代码代码如下:$('select#sel')[0].selectedIndex = 0;6. 设置最后⼀个option为选中值：复制代码代码如下:$('select#sel option:last).attr('selected','true')7. 根据索引值设置任意⼀个option为选中值：复制代码代码如下:$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....8. 设置Value=4 的option为选中值：复制代码代码如下:$('select#sel').attr('value','4');或者复制代码代码如下:$("select#sel option[value='4']").attr('selected', 'true');9. 删除Value=3的option：复制代码代码如下:$("select#sel option[value='3']").remove();10.删除第⼏个option：复制代码代码如下:$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....如删除第3个Radio:复制代码代码如下:$(" select#sel option ").eq(2).remove();11.删除第⼀个option：复制代码代码如下:$(" select#sel option ").eq(0).remove();或者复制代码代码如下:$("select#sel option:first").remove();12. 删除最后⼀个option：复制代码代码如下:$("select#sel option:last").remove();13. 删除dropdownlist:复制代码代码如下:$("select#sel").remove();14.在select后⾯添加⼀个option:复制代码代码如下:$("select#sel").append("<option value='6'>f</option>"); 15. 在select前⾯添加⼀个option:复制代码代码如下:$("select#sel").prepend("<option value='0'>0</option>"); 16. 遍历option：复制代码代码如下:$(' select#sel option ').each(function (index, domEle) { //写⼊代码});。

JQuery打造下拉框联动效果

JQuery打造下拉框联动效果做联动效果，若是⽤纯JavaScript来做，往往须要辅助页⾯保存须要刷新的结果集，然后渲染到原页⾯。

考虑将须要动态刷新的内容⾃⼰主动拼接到前⼀个下拉框之后，当前⼀个下拉框onchange后，同级的后⾯的下拉框所有清除，然后⼜⼀次拼接刷新的内容。

⽤JQuery实现⽐較easy，代码以省市联动效果为例实现。

JSP页⾯代码例如以下：<li id="base"><p>⽣源地:</p><label><select id="provinceCode" name="provinceCode" onchange="refreshCity()"><option value="">所有</option><c:forEach items="${provinceInfoList}" var="provinceInfo"><option value="${provinceInfo.code}">${provinceInfo.provinceName}</option></c:forEach></select></label></li>JavaScript代码例如以下：function refreshCity(){if($('#provinceCode').find('option:selected').val() == ""){$('#provinceCode').parent().nextAll('lable').remove();return;}//省份名称var provinceName = $('#provinceCode').find('option:selected').text();provinceName = provinceName.substring(0,provinceName.length-4);// 发出Json请求，查询⼦下拉框选项数据$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", {proviceCode : $('#provinceCode').val()}, function(data) {// 假设有⼦选项，则创建⼦下拉框if(data != null){// 删除下拉框⽗级<lable>后的全部同级<lable>$('#provinceCode').parent().nextAll('lable').remove();var childId = "city";// 推断是否存在下⼀级下拉框不存在就创建if($('#'+childId).length == 0){// 创建⼀个<li>并创建⼀个<select>加⼊到id为extra的<ul>中$("<lable><select id='"+childId+"' name='"+childId+"' ></select></li>").appendTo($('#base'));}else{//清空⼦下拉框内容$('#' + childId).empty();}// 遍历json串，填充⼦下拉框$.each(data.city, function(i, item) {$('#' + childId).append("<option value='"+item.code+"'>" + AndCode+ "</option>");});}});}依据省份获取市的代码例如以下：public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{ ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);List<CityInfo> cityList = this.provinceAndCityInfoService.getCityListByProperty("belongProvinceId", provinceInfo.getId()+"");// 初始化准备输出的Json串String cityJson = "";// 遍历集合，构造json串if (cityList.size() > 0) {cityJson = "{\"city\":[";// 拼接查询到的⼦项for (int i = 0; i < cityList.size(); i++) {CityInfo city = cityList.get(i);String temp = "{\"code\":\"" + city.getCode()+ "\",\"nameAndCode\":\"" + city.getName()+"("+ city.getCode() +")"+ "\"}";// 假设是集合中最后⼀项，则拼接结束符，否则⽤","隔开if (i == cityList.size() - 1) {cityJson = cityJson + temp + "]}";} else {cityJson = cityJson + temp + ",";}}}// 设置输出的字符集和类型并输出json串response.setCharacterEncoding("UTF-8");response.setContentType("json");response.getWriter().print(cityJson); }。

带搜索框的jQuery下拉框插件

带搜索框的jQuery下拉框插件由于下拉框的条数有⼏⼗个，于是打算找⼀个可以搜索查找功能的下拉框，刚开始在⽹上看了⼏个，都是有浏览器兼容性问题，后来看到这个“”，看演⽰代码简单易⽤，⽀持多个浏览器。

不过在使⽤过程中碰到了⼏个问题，先后解决了。

1、多个下拉框放在⼀起会出现遮挡的问题，原⽂评论有个解决⽅法：在jquery.searchableSelect.js⽂件⾥⾯的代码⾥⾯加上下⾯2⾏带注释的代码show: function() {this.dropdown.removeClass('searchable-select-hide');this.input.focus();this.status = 'show';this.setPriviousAndNextVisibility();this.dropdown.css('z-index', 100); //打开下拉列表时调⾼z-index层级}, hide: function() {if (!(this.status === 'show')) return;if (this.items.find(':not(.searchable-select-hide)').length === 0) this.input.val('');this.dropdown.addClass('searchable-select-hide');this.searchableElement.trigger('focus');this.status = 'hide';this.dropdown.css('z-index', 1); //关闭下拉列表时恢复z-index层级},2、原⽂⽤的是jquery-1.11.1.min.js，但是整个项⽬⽤的是jquery-1.7.2.js，在chrome浏览器F12调试⼀加载页⾯会出现错误信息：Uncaught TypeError: $.expr.createPseudo is not a function$(...).searchableSelect is not a function点进去提⽰$.expr.createPseudo有语法错误猜测是jquery版本问题，果然，搜索了⼀下，$.expr.createPseudo是jquery1.8.1版本以上⽀持的。

Winform如何实现ComboBox模糊查询

Winform如何实现ComboBox模糊查询最近朋友问了⼀个关于Winform实现ComboBox模糊查询的知识点，⾃⼰好久没有搞Winform了，就上⼿练了⼀下，废话不多说，进⼊正题。

前台设计：前台就是⼀个简单的Form窗体+⼀个ComboBox控件。

思路整理： 1.⽤⼀个List<string> listOnit存放初始化数据，⽤⼀个List<string> listNew存放输⼊key之后，返回的数据。

2.⽤上⾯的listOnit初始化ComboBox数据源进⾏绑定。

3.在TextUpdate⽅法内部，添加实现⽅法。

⾸先进⼊⽅法，先清除ComboBox的内容，然后将输⼊的内容去listOnit初始化的数据中⽐对，找出对应数据，然后放⼊listNew存放数据，最后将listNew数据重新赋值给 ComboBox。

后台代码实现：using System;using System.Collections.Generic;using ponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;namespace TimerDemo{public partial class Form2 : Form{//初始化绑定默认关键词（此数据源可以从数据库取）List<string> listOnit = new List<string>();//输⼊key之后，返回的关键词List<string> listNew = new List<string>();public Form2(){InitializeComponent();}private void Form2_Load(object sender, EventArgs e){//调⽤绑定BindComboBox();}/// <summary>/// 绑定ComboBox/// </summary>private void BindComboBox(){listOnit.Add("张三");listOnit.Add("张思");listOnit.Add("张五");listOnit.Add("王五");listOnit.Add("刘宇");listOnit.Add("马六");listOnit.Add("孙楠");listOnit.Add("那英");listOnit.Add("刘欢");/** 1.注意⽤Item.Add(obj)或者Item.AddRange(obj)⽅式添加* 2.如果⽤DataSource绑定，后⾯再进⾏绑定是不⾏的，即便是Add或者Clear也不⾏*/boBox1.Items.AddRange(listOnit.ToArray());}private void comboBox1_TextChanged(object sender, EventArgs e){/** 不能⽤TextChanged操作，当boBox1.DroppedDown为True时，选择项上下键有冲突*/}private void comboBox1_TextUpdate(object sender, EventArgs e){//清空comboboxboBox1.Items.Clear();//清空listNewlistNew.Clear();//遍历全部备查数据foreach (var item in listOnit){if (item.Contains(boBox1.Text)){//符合，插⼊ListNewlistNew.Add(item);}}//combobox添加已经查到的关键词boBox1.Items.AddRange(listNew.ToArray());//设置光标位置，否则光标位置始终保持在第⼀列，造成输⼊关键词的倒序排列boBox1.SelectionStart = boBox1.Text.Length;//保持⿏标指针原来状态，有时候⿏标指针会被下拉框覆盖，所以要进⾏⼀次设置。

Winform实现combox控件手动匹配查找，模糊查询功能

Winform实现combox控件⼿动匹配查找，模糊查询功能1.设置Combox属性： DropDownStyle:DropDown2.添加TextUpdate事件3.下列为Name = cb_material 的 combox 控件private void cb_material_TextUpdate(object sender, EventArgs e){string s = this.cb_material.Text; //获取cb_material控件输⼊内容List<string> strList = new List<string>(); //存放原始数据(可以是对象，字符串...)strList.AddRange(materials.ToArray()); // List<string> materialsList<string> strListNew = new List<string>();//清空comboboxthis.cb_material.Items.Clear();//遍历全部原始数据foreach (var item in strList){// 根据输⼊的值模糊查询,将符合条件的值存储到新strListNew的集合⾥⾯if (item.shape.Contains(this.cb_material.Text)){strListNew.Add(item);}}if (strListNew.Count >= 1) // 存在符合条件的内容{//将符合条件的内容加到combobox中this.cb_material.Items.AddRange(strListNew.ToArray());}else // 不存在符合条件时{// 下列代码为当查询不到符合的条件时新增⾃⾝输⼊的值// this.cb_material.Items.Add(this.cb_material.Text);}//设置光标位置，若不设置：光标位置始终保持在第⼀列，造成输⼊关键词的倒序排列this.cb_material.SelectionStart = this.cb_material.Text.Length; // 设置光标位置，若不设置：光标位置始终保持在第⼀列，造成输⼊关键词的倒序排列 Cursor = Cursors.Default; //保持⿏标指针原来状态，有时候⿏标指针会被下拉框覆盖，所以要进⾏⼀次设置this.cb_material.DroppedDown = true; // ⾃动弹出下拉框}。

基于bootstrapselectpicker，实现select下拉框模糊查询功能

基于bootstrapselectpicker，实现select下拉框模糊查询功能1、html代码块需要引⼊bootstrap的css js jquerybootstrap.cssbootstrap-select.min.cssjquery-1.11.3.min.jsbootstrap.min.jsbootstrap-select.min.js<select class="selectpicker show-tick" style="outline: none;width:200px;" data-live-search="true" id="select_article" name="select_article"><option value="" data-name="">请选择物品</option></select>2、js代码$('.selectpicker').selectpicker({noneSelectedText: '',noneResultsText: '',liveSearch: true,size:5 //设置select⾼度，同时显⽰5个值});$(window).on('load', function () {var sid = $("#select_article").val();$('.selectpicker').selectpicker('val', '');$('.selectpicker').selectpicker('refresh');$.ajax({method:'POST',url:'get_items',dataType:'json',success: function (res) {var html="<option value='0'>请选择物品</option>";console.log(res);for (var i = 0; i < res.content.length; i++) {if (sid == res.content[i].tid) {html += "<option value='" + res.content[i].tid + "' selected='selected' data-name='"+res.content[i].name+"'>" + res.content[i].name + "</option>";} else {html += "<option value='" + res.content[i].tid + "' data-name='"+res.content[i].name+"'>"+ res.content[i].name + "</option>";}}$("#select_article").html(html);$('.selectpicker').selectpicker('refresh');//加载select框选择器}});});插件功能还是⽐较强⼤，做出来后还是有点欣喜的唉原谅我这烂烂的js。

jQuery操作选中select下拉框的值

jQuery操作选中select下拉框的值js和jQuery联合操作dom真的很好⽤，如果不是专业前端⼈员的话，我觉得吧前端语⾔只要熟练掌握js和jQuery就可以了。

获取select下拉框的⼏种情况如下：1.获取第⼀个option的值$('#test option:first').val();2.最后⼀个option的值$('#test option:last').val();3.获取第⼆个option的值$('#test option:eq(1)').val();依次类推可以获取第三个、第四个option的值4.获取选中的值var groupid = $("#groupid").find("option:checked").val();$('#groupidoption:selected').val();$('#groupid').val();<td align="center" class="tableFormLabel" ><select id="groupid" class="input-text" > </select></td>5.设置值为2的option为选中状态$('#test').attr('value','2');6.设置最后⼀个option为选中$('#test option:last').attr('selected','selected');$("#test").attr('value' , $('#test option:last').val());$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());7.获取select的长度$('#test option').length;8.添加⼀个optionvar str="<option value='n+1'>第N+1项</option>";$("#test").append(str); //⼀般都⽤这个追加$("<option value='n+1'>第N+1项</option>").appendTo("#test");9.删除选中项$('#test option:selected').remove();10.删除项选中的第⼀项$('#test option:first').remove();11.删除满⾜条件的option$('#test option').each(function(){if( $(this).val() == '5'){$(this).remove();}});$('#test option[value=5]').remove();参考博客：。

JQuery下拉框模糊查询

2012-04-10 14:24C#+jQuery+div实现下拉框信息提示模糊搜索结果（百度、google搜索提示框）实现效果：用户输入查询字符串，当文本框内容变化时，显示下拉框为用户提示完整信息，并可以实现选中所查信息后获得对应ID而进行更进一步的关联显示。

（比如搜某一公司，选中公司后在根据公司ID获得公司产品）。

推荐jQuery Autocomplete 插件：（演示地址）http://jquery.bassistance.de/autocomplete/demo/?主人博客：http://bassistance.de/ (还有好多有用的Plugins)手动实现：在输入框所在的页面：引入jquery开发包：样式及脚本<script src="../../css/jquery-1.7.1.min.js"type="text/javascript"></script><style type="text/css" media="screen">body{font: 11px arial;}.suggest_link_alt{background-color: #FFFFFF;text-align:right;cursor:hand;padding: 2px 6px 2px 6px;z-index:101;}.suggest_link{background-color: #FFFFFF;padding: 2px 6px 2px 6px;z-index:101;}.suggest_link_over{background-color: #E8F2FE;padding: 2px 6px 2px 6px;z-index:101;}#search_suggest{z-index:100;position: absolute; background-color: #FFFFFF; text-align: left;border: 1px solid #000000; }#search_suggestR{z-index:100;position: absolute; background-color: #FFFFFF; text-align: left;border: 1px solid #000000; }/*input*/.input_on{margin:2px 8px 0pt 10px; height:18px;border:1px solid #999; background-color:#FFFFCC; }.input_off{margin:2px 8px 0pt 10px; height:18px;border:1px solid #CCC; background-color:#FFF;}.input_move{margin:2px 8px 0pt 10px; height:18px;border:1px solid #999; background-color:#FFFFCC; }.input_out{/*height:16px;默认高度*/ margin:2px 8px 0pt 10px; height:18px;border:1px solid #CCC; background-color:#FFF;}</style><script language="javascript" type="text/javascript">function DivSetVisible(divid, frameid, state) {varDivRef = document.getElementById(divid);varIfrRef = document.getElementById(frameid);if (state) {DivRef.style.display = "block";IfrRef.style.width = DivRef.offsetWidth;IfrRef.style.height = DivRef.offsetHeight;IfrRef.style.top = DivRef.style.top;IfrRef.style.left = DivRef.style.left;IfrRef.style.zIndex = DivRef.style.zIndex - 1;IfrRef.style.display = "block";}else {DivRef.style.display = "none";IfrRef.style.display = "none";}}</script><script language="javascript" type="text/javascript">//当输入框的内容变化时，调用该函数function searchSuggest() {if ($("#txtSearch").val() != "" && $("#txtSearch").val()!=null) {$.ajax({type: "GET",url: "../../AJAX.aspx",data: "type=searchCompany&searchText=" + escape($("#txtSearch").val()), success: function(result) {varsourceText = result.split("**");if (sourceText.length> 1) {DivSetVisible("search_suggest", "DivShim", true);//$("#search_suggest").show();$("#search_suggest").html("");for (vari = 0; i<sourceText.length - 1; i++) {var s = ' <div onmouseover="javascript:suggestOver(this);"';s += ' onmouseout= "javascript:suggestOut(this);" ';s += ' onclick= "javascript:setSearch(this.innerHTML,this.id);" ';s += ' class= "suggest_link" id="' + sourceText[i].split(",")[0] + '">' + sourceText[i].split(",")[1] + '</div>';$("#search_suggest").html($("#search_suggest").html() + s);}$("#search_suggest").html($("#search_suggest").html() + "<div class= \"suggest_link_alt\"onclick=\"javascript:DivSetVisible('search_suggest', 'DivShim', false);\">关闭提示</div>");}else {DivSetVisible("search_suggest", "DivShim", false);//$("#search_suggest").hide();}}});}else {DivSetVisible("search_suggest", "DivShim", false);//$("#search_suggest").hide();}}functionsuggestOver(div_value) {div_value.className = "suggest_link_over";}functionsuggestOut(div_value) {div_value.className = "suggest_link";}function setSearch(obj,id) {$("#txtSearch").val(obj);$("#hidCompId").val(id);$.ajax({type: "GET",url: "../../AJAX.aspx",data: "type=getCompanyJob&companyId=" + id,success: function(result) {$("#drpPost").empty();varsourceText = result.split("**");if (sourceText.length> 1) {for (vari = 0; i<sourceText.length - 1; i++) {$("<option value='" + sourceText[i].split(",")[0] + "'>" + sourceText[i].split(",")[1]+ "</option>").appendTo("#drpPost")}}});$("#search_suggest").html("");DivSetVisible("search_suggest", "DivShim", false);//$("#search_suggest").hide();}</script>HTML:<input type="text" id="txtSearch" name="txtSearch"onchange="searchSuggest();" size="50" class="input_out input"onfocus="this.className='input_on';this.onmouseout=''"onblur="this.className='input_off';this.onmouseout=function(){this.cl assName='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /><br /><div id="search_suggest" style="display:none; z-index:100;"></div><iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"></iframe><input type="hidden" id="hidCompId" />AJAX.aspx实现：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AJAX.aspx.cs" Inherits="AJAX" %>AJAX.aspx.cs:stringsearchText = Request["searchText"];StringBuilder result = new StringBuilder(100);if (!string.IsNullOrEmpty(searchText)){SqlDataReaderdr = null;try{dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionString, CommandType.Text,"select top 20 Identifier,Company from UserInfo where company like '%'+@keywords+'%'",new SqlParameter("@keywords", searchText));while (dr.Read())result.Append(dr[0].ToString() + "," + dr[1].ToString() + "**"); }}catch{}finally{if (dr != null && !dr.IsClosed){dr.Close();dr.Dispose();}}}Response.Write(result.ToString());。

下拉式模糊查询方法

下拉式模糊查询方法1.1 什么是下拉式模糊查询。

咱先来说说啥是下拉式模糊查询呢。

简单来讲，这就像是你在一个大仓库里找东西，但是你不太清楚东西具体叫啥名儿，只知道个大概。

下拉式模糊查询就是在一个下拉菜单里，你输入个大概的内容，然后系统就给你找出那些可能符合你要求的选项。

比如说，你想找个姓王的朋友，你在查询框里输入“王”字，那下面就会列出好多姓王的相关信息，可能是王某某的联系方式，或者是和王有关的一些项目啥的。

这就像是你在人群里大喊一声“姓王的”，那些姓王的就都站出来了似的。

1.2 它的好处。

这下拉式模糊查询啊，好处可不少。

它就像一个贴心的小助手，省时又省力。

你想啊，如果没有这个功能，你得在海量的信息里一个一个翻找，那可真是大海捞针，累得够呛。

有了这个功能，就像是给你开了个捷径，一下子就能找到你可能需要的东西。

这就好比你要找一本书，图书馆里有成千上万本，要是没个索引，你得找多久啊。

可现在有了下拉式模糊查询这个索引，你很快就能定位到和你要找的书相关的区域了。

2.1 数据匹配。

那这东西是怎么做到的呢？这里面有个数据匹配的过程。

系统会把你输入的模糊内容，和它后台存储的那些数据进行比对。

就像玩猜谜语一样，你给个谜面，系统就从它的谜底库里找答案。

比如说，你输入“红色的花”，系统就会在它所有关于花的记录里，把那些红色的花的信息找出来。

这个过程有点像筛沙子，把符合条件的沙子（数据）筛出来，不符合的就留在一边。

2.2 算法优化。

当然了，这里面还涉及到算法优化。

这就像是给这个小助手不断地升级技能。

好的算法能让查询的结果更准确、更快。

就好比一个熟练的工匠，工具越精良，做出来的活儿就越漂亮。

如果算法不好，可能就会出现一些错误的结果，就像一个新手干活儿，总是会出些小差错。

比如说，你输入“水果”，结果给你出来一堆蔬菜的信息，这就是算法没整好。

2.3 数据索引的建立。

还有个重要的事儿就是数据索引的建立。

这就像是给每个数据都贴个标签一样。

jquery及原生js获取select下拉框选中的值示例

这篇文章主要介绍了javascript编程开发中取色器及封装函数结合实例形式分析了javascript封装函数及数值运算页面元素动态操作实现取色器功能相关技巧需要的朋友可以参考下
jquery及原生 js获取 select下拉框选中的值示例
现在有一id=test的下拉框，怎么拿到选中的那个值呢？分别使用javascript原生的方法和jquery方法复制代码代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select>
1:var options=$("#test option:selected"); //获取选中的项 2:alert(options.val()); //拿到选中项的值 3:alert(options.text()); //拿到选中项的文本
1:拿到sห้องสมุดไป่ตู้lect对象： var myselect=document.getElementById("test"); 2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index 3:拿到选中项options的value： myselect.options[index].value; 4:拿到选中项options的text： myselect.options[index].text;

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

（比如搜某一公司，选中公司后在根据公司ID获得公司产品）。