- 浏览: 2333178 次
- 性别:
- 来自: 武汉
文章分类
- 全部博客 (559)
- JavaScript (55)
- windows (21)
- mysql (7)
- php (199)
- thinkphp (2)
- 互联网 (42)
- flash (3)
- html (9)
- phpcms (11)
- ffmpeg (6)
- 生活 (108)
- flash小游戏 (11)
- 软件 (35)
- css (1)
- JavaScript 二维码 (0)
- 二维码 (1)
- 桌面图标 (1)
- ping服务 (1)
- 百度 (2)
- 搜索引擎 (1)
- seo (1)
- 整形美容 (1)
- 深圳婚纱摄影 (1)
- 武汉婚纱摄影 (2)
- 淘宝 (0)
- 冬装 (0)
- 女装 (0)
- 新款冬装女装 (0)
- freebsd 操作系统 (1)
- editplus (1)
- svn (1)
- 微信 (1)
- 微商 (1)
- curl (1)
- 远程 (1)
- 防盗链 (1)
- vc2012 (1)
- Alexa (1)
- bootstrap (1)
- fileinput (1)
- webuploader (1)
- mip (1)
- 正则 (1)
最新评论
-
hexawing:
啥原理……貌似很神奇啊
excel写保护(非打开保护)的破解方法 -
化蝶自在飞:
注意upload.js的配置参数 sendAsBinary
webuploader实例php 配合fastDFS远程跨域上传回调的注意点 -
化蝶自在飞:
增加一个微信内置浏览器的useragent:
Mozilla/ ...
浏览器useragent大全 -
化蝶自在飞:
leiliang10 写道你揍是个骗纸此话怎讲?这个工具是我自 ...
mp4、mov视频元数据头信息修复工具 支持h.264编码边下边播 -
leiliang10:
你揍是个骗纸
mp4、mov视频元数据头信息修复工具 支持h.264编码边下边播
有时候,一个下拉框元素太多了就不方便选择了.可能你也有同样的感慨,拉上来拉下去就是找不到要的选项.现在就来实现一个效果:js 搜索下拉框select并选中目标选项.
先上一个完整的示例,你自己另存为html就看得到效果的:
注意看js函数,searchByName(id,value) 表示为select的id和输入的欲搜索的字符串.
这个是一个通用的js,同一个页面可以重复使用,不过要改变其中select的id就可以了.你可以批量替换的.
<span id="cat_idspan">0</span> 这里的 cat_id 也表示select的id.
先上一个完整的示例,你自己另存为html就看得到效果的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>k686绿色软件 - http://www.k686.com/</title> </head> <body> <script type="text/javascript"> function searchByName(id,value){ var spl=value.toLowerCase();//将输入值转成小写 var selectProjects=document.getElementById(id); var options=selectProjects.options; var total = -1; var meetArray = new Array(); for(var i=0;i<options.length;i++){ var op_text=options[i].text.toLowerCase();//将option的文本转成小写 var opArray=op_text.split(spl); if(spl.length>0 && opArray.length>1){ //匹配到了 total++; meetArray[total]=i; } } var beginIndex = 0; for(var i=0;i<=total;i++){ var index = meetArray[i]; if(index!=beginIndex){ var tempText = options[index].text; var tempValue = options[index].value; options[index].text = options[beginIndex].text; options[index].title = options[beginIndex].text; options[index].value = options[beginIndex].value; options[beginIndex].text=tempText; options[beginIndex].title=tempText; options[beginIndex].value=tempValue; } beginIndex++; selectProjects.options[i].selected = true; } document.getElementById(id+"span").innerHTML=(total+1); } </script> <select name="cat_id" id="cat_id"><option value="0">请选择...</option><option value="1" >汽车装饰</option><option value="11" > 车内舒适用品</option><option value="16" > 夏季凉垫</option><option value="23" > 车载冰箱</option><option value="20" > 车用空调被</option><option value="17" > 冬季毛垫</option><option value="24" > 遮阳挡</option><option value="21" > 汽车颈枕</option><option value="18" > 汽车腰靠</option><option value="22" > 汽车布艺</option><option value="19" > 汽车抱枕</option><option value="59" > 汽车防盗用品</option><option value="123" > 方向盘锁</option><option value="124" > 排挡锁</option><option value="125" > 防盗器</option><option value="39" > 汽车香水</option><option value="45" > 挂饰香水</option><option value="42" > 高级香水</option><option value="46" > 出风口香水</option><option value="43" > 香水补充液</option><option value="40" > 水晶香水</option><option value="44" > 汽车香膏</option><option value="41" > 卡通香水</option><option value="60" > 车主个人用品</option><option value="68" > 车钥匙扣</option><option value="129" > 赛车服帽</option><option value="126" > 车载剃须刀</option><option value="130" > 打火机</option><option value="127" > 汽车CD盒</option><option value="67" > 驾驶证套</option><option value="128" > 司机眼镜</option><option value="6" > 车内装饰用品</option><option value="13" > 安全带套</option><option value="8" > 方向盘套</option><option value="14" > 卡通公仔</option><option value="9" selected='ture'> 汽车挂饰</option><option value="15" > 排挡套</option><option value="12" > 后视镜套</option><option value="10" > 太阳能公仔</option><option value="7" > 汽车座套</option><option value="54" > 车内空气清新</option><option value="56" > 汽车除菌剂</option><option value="57" > 空气清新剂</option><option value="58" > 汽车氧吧</option><option value="55" > 车用竹炭</option><option value="47" > 车内清洁用品</option><option value="48" > 汽车脚垫</option><option value="53" > 车载吸尘器</option><option value="50" > 车用纸巾盒</option><option value="49" > 后备箱垫</option><option value="51" > 擦车巾</option><option value="52" > 皮革护理</option><option value="25" > 车内功能用品</option><option value="32" > 点烟器</option><option value="29" > 眼镜票据夹</option><option value="26" > 年检袋</option><option value="36" > 指南针球</option><option value="33" > 烟灰缸</option><option value="30" > 手机架</option><option value="27" > 逆变器</option><option value="37" > 防滑垫</option><option value="34" > 汽车钟表</option><option value="31" > 手机车充</option><option value="28" > 助力把球</option><option value="38" > 车用衣架</option><option value="35" > 温湿度计</option><option value="5" >改装配件</option><option value="144" > 汽车改装与配件</option><option value="148" > 脚踏板</option><option value="145" > 灯框灯罩</option><option value="158" > 发动机保护板</option><option value="155" > 挡泥板</option><option value="152" > 迎宾踏板</option><option value="149" > 门拉手</option><option value="146" > 雨刮片</option><option value="143" > 后护板</option><option value="156" > 气门嘴</option><option value="153" > 尾喉消声器</option><option value="150" > 汽车门碗</option><option value="147" > 汽车雨挡</option><option value="157" > 扶手箱</option><option value="154" > 出风口</option><option value="151" > 油箱盖</option><option value="2" >汽车护理</option><option value="62" > 车外装饰与功能</option><option value="132" > 汽车天线</option><option value="91" > 金属小车贴</option><option value="136" > 车牌架</option><option value="133" > 除静电带</option><option value="92" > 个性车贴</option><option value="137" > 警示牌</option><option value="134" > 全车车贴</option><option value="131" > 油箱贴</option><option value="90" > 汽车标志</option><option value="135" > 装饰灯</option><option value="63" > 汽车护理与美容</option><option value="84" > 机油排挡油</option><option value="81" > 抗磨修复剂</option><option value="78" > 汽车车衣</option><option value="75" > 清洁剂</option><option value="72" > 去污蜡</option><option value="69" > 底盘装甲</option><option value="82" > 水箱宝</option><option value="79" > 汽车补漆笔</option><option value="76" > 清洁打蜡工具</option><option value="73" > 修复蜡</option><option value="70" > 镀膜釉</option><option value="83" > 贴膜工具</option><option value="80" > 防撞条</option><option value="77" > 防冻液</option><option value="74" > 轮胎蜡</option><option value="71" > 光泽蜡</option><option value="3" >汽车电子</option><option value="61" > 汽车影音</option><option value="100" > 车载DVD</option><option value="97" > 车载MP3</option><option value="101" > 汽车音响</option><option value="98" > 车载MP4</option><option value="99" > 蓝牙免提</option><option value="4" >户外驾驶</option><option value="88" > 汽车照明</option><option value="139" > 氙气灯</option><option value="140" > 大灯增光器</option><option value="138" > 车顶灯</option><option value="85" > 安全驾驶用品</option><option value="94" > 倒车摄像头</option><option value="107" > 防驾驶疲劳</option><option value="104" > 打气泵</option><option value="95" > 电子狗</option><option value="108" > 儿童安全椅</option><option value="105" > 胎压计</option><option value="102" > 倒车雷达</option><option value="96" > GPS导航</option><option value="93" > 缓冲器</option><option value="106" > 大视野镜</option><option value="103" > 玻璃防雾剂</option><option value="89" > 汽车省油</option><option value="142" > 省油器</option><option value="141" > 燃油添加剂</option><option value="86" > 应急用品</option><option value="113" > 维修工具</option><option value="110" > 警示三角架</option><option value="114" > 启动电源</option><option value="111" > 拖车绳</option><option value="112" > 暴闪灯</option><option value="109" > 车用灭火器</option><option value="87" > 汽车旅行用品</option><option value="116" > 折叠桌椅</option><option value="120" > 水壶水囊</option><option value="117" > 野营工具</option><option value="121" > 储备油箱</option><option value="118" > 帐篷睡袋</option><option value="115" > 野营灯</option><option value="122" > 对讲机</option><option value="119" > 背包背囊</option></select> 共匹配到<span id="cat_idspan">0</span>个选项 <input type="text" value="" id="catsearch" size="20"><input type="button" onclick="JavaScript:searchByName('cat_id',document.getElementById('catsearch').value);" value=" 搜 索 "> </body> </html>
注意看js函数,searchByName(id,value) 表示为select的id和输入的欲搜索的字符串.
这个是一个通用的js,同一个页面可以重复使用,不过要改变其中select的id就可以了.你可以批量替换的.
<span id="cat_idspan">0</span> 这里的 cat_id 也表示select的id.
发表评论
-
webuploader实例php 配合fastDFS远程跨域上传回调的注意点
2016-08-02 19:31 3271webuploader上传控件是百度官方提供的一套基于ht ... -
bootstrap上传插件fileinput自动上传&上传成功回调的方法
2016-05-04 19:25 11303bootstrap上传插件fileinput功能非常强大, ... -
bootstrap上传插件fileinput自动上传&上传成功回调的方法
2016-05-03 20:16 21bootstrap上传插件fileinput功能非常强大,本 ... -
微信内置浏览器图片查看方式的原生实现(非jssdk)
2015-06-29 13:30 9962对于非公众平台网页,想调起图片预览组件,就跟公众号文章一样的 ... -
ajax提交表单的一些注意事项:解释为什么return false却依然提交
2012-02-02 19:10 2105ajax提交表单的一些注意事项.ajax提交表单是经常用到的. ... -
phpcms v9编辑器ckeditor数据恢复功能
2011-11-12 21:57 2814为phpcms v9的ckeditor编辑器开发的数据恢复功能 ... -
php+js抓取太平洋汽车网数据自动填表的一个实现
2011-11-11 22:34 2893主要是php输出json,js解析的模式 function ... -
jQuery二维码插件-改自MyQRCode,支持中文字符
2011-08-27 19:34 3848jQuery二维码插件-改自MyQRCode /** ... -
ajax中文参数乱码&ajax缓存的解决方法
2011-07-19 22:13 1547function ajax_get_xm(id,value ... -
jquery和multiple的前世今生-一点点代码收集
2011-03-17 13:43 1232<script type="text/ja ... -
对联广告代码_兼容jquery框架
2011-03-15 09:51 2625对联广告代码: suspendcode="< ... -
二维json格式的解法
2011-01-26 11:01 5082从淘宝数据魔方抓取来的行情简报,json格式如下: [[{& ... -
ckeditor编辑器Word文档粘贴自动去格式的解决方法
2011-01-12 22:36 7778ckeditor,个人感觉相当难用,默认版本会自动格式化从Wo ... -
ckeditor编辑器字体字体大小的调整
2011-01-05 19:55 2888ckeditor编辑器字体字体大小的调整,for phpcms ... -
select下拉框下拉跳转代码
2010-12-22 09:12 3306select下拉框下拉跳转代码 <select na ... -
jquery val() 返回undefined的问题
2010-12-14 17:07 2684jquery val() 返回undefined的问题. ... -
js动态显示时间_js 显示时间的一般写法
2010-12-08 15:43 2010js动态显示时间_js 显示时间的一般写法,数秒效果.不是那种 ... -
分享几条伪静态规则的写法 .htaccess
2010-11-29 10:47 2977RewriteEngine on ... -
js解析php返回的数组格式字符串
2010-11-28 23:43 3210ajax请求php返回一个数组格式的字符串,情况特殊不能修改p ... -
js中replace的用法 正则替换全部符合条件的字符串
2010-11-28 23:38 2308js中replace的用法. <script lan ...
相关推荐
Bootstrap框架是一款流行的前端开发框架,它提供了一系列的CSS和JavaScript组件,帮助开发者快速构建响应式、移动优先的网页。在Bootstrap中,下拉框(select)通常用于创建一个可选的列表,用户可以通过点击下拉...
`jQuery手机下拉框select` 主要关注于改善移动端的用户体验,通过JavaScript和CSS增强下拉框的外观和功能。 ### jQuery Mobile Select Menu jQuery Mobile 提供了一个专门的 Select Menu 插件,用于将标准的...
Bootstrap-select则是这个框架的一个扩展,它为下拉框添加了更多样式和功能,比如搜索、分页、分组等。 要使用bootstrap-select,你需要先在项目中引入Bootstrap和jQuery,然后引入bootstrap-select的CSS和JS文件。...
无论是原生JavaScript还是前端框架,实现“可文本输入的下拉框select”都需要对DOM操作、事件监听和数据处理有深入理解。在实际项目中,为了提高可维护性和用户体验,开发者还应考虑以下因素: 1. 键盘导航:确保...
Vue下拉框回显并默认选中随机问题通常指的是在使用Vue.js框架和ElementUI组件库开发前端页面时,遇到下拉框组件在数据回显时出现选择状态随机的问题。这一问题可能会导致用户体验下降,因为下拉框中的选项在多次刷新...
在这个示例中,我们看到两种方法来实现这一目标:一种是纯JavaScript,另一种是使用jQuery库。 对于纯JavaScript的实现,我们可以创建一个`<select>`元素,并为它添加`onchange`事件监听器。当用户改变选中的`...
### JavaScript 操作 Select 下拉框的关键知识点 在 Web 开发中,`<select>` 元素用于创建下拉列表(或选择框)。这些选择框在用户界面中非常常见,可以用来收集用户输入的信息,比如让用户从一系列选项中选择一个...
本示例“jQuery下拉框图片选择特效imageselect.js”是利用jQuery的强大力量来提升用户界面的美观性和交互性。在这个项目中,我们将会探讨如何使用这个插件来实现一个具有图片选择功能的下拉菜单,从而让传统的...
如何获取select下拉框的值: 1.下拉框的option没有value属性时 代码如下: <select id=”param1″> <option>学号</option> <option>姓名</option> <option>年龄</option> </seclect> [removed] [removed] = ...
本文将深入探讨如何使用JavaScript实现两个Select下拉框之间的元素互相移动的功能。这一功能常见于需要动态调整选项归属的情景,例如在多选设置或数据分类中。 首先,我们需要创建两个Select元素,分别命名为`...
为了提高用户的操作效率,我们常常需要在`select`下拉框中集成搜索功能,让用户能够通过输入关键字快速找到所需选项。这就是"select下拉框添加搜索功能"这个知识点的核心所在。 在`select`下拉框中实现搜索功能,...
在“bootstrap select 下拉框通过拼音搜索汉字”这个实例中,我们关注的重点是如何利用该插件实现通过输入拼音来搜索并筛选汉字的功能,这对于中文环境下的用户体验提升有着显著的作用。 首先,我们要了解Bootstrap...
本示例中,"JQ JS javascript layui UI框架 带搜索下拉框 select" 是一个基于jQuery和layui的特定功能实现,即在layui的UI设计中创建了一个具有搜索功能的下拉选择框。这个功能在许多网页应用中都很常见,例如在表单...
JavaScript(简称js)作为客户端脚本语言,常被用来增强网页的交互性,其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript来创建和操作多选下拉框。 首先,HTML基础是构建多选下拉框的起点。一个基本...
在网页设计和开发中,`select`元素是用于创建下拉菜单的标准HTML组件...在压缩包文件中的"select下拉框多选"示例,可能会包含一个实现这一功能的完整HTML页面、CSS样式表和可能的JavaScript脚本,供学习者参考和实践。
在网页设计和开发中,"下拉框多选select多选"是一个常见的功能,它允许用户在下拉菜单中选择多个选项,而不仅仅是一个。在HTML中,`<select>`元素通常用于创建这样的下拉菜单,但默认情况下,`<select>`只支持单选。...
在IT领域,尤其是在Web开发中,`JQ`、`JS`、`javascript`和`bootstrap`是四个非常重要的概念。这些技术共同构建了交互性强、用户体验良好的网页应用。让我们详细了解一下这些知识点。 首先,`javascript`是网页开发...
标题中的“JS实现左边的下拉框内容移动到右边下拉框,支持内容上下移动”是一个常见的前端交互功能,常用于表单或者过滤选择场景。这个功能涉及到JavaScript的基础知识,DOM操作,事件处理以及可能的AJAX技术。下面...
在JavaScript中,下拉框通常是通过`<select>`元素来实现的。而图片的显示通常与`<img>`标签相关联。在实际开发中,我们可能会遇到一种需求,即通过下拉框选择来控制图片的显示。本文将详细介绍如何使用JavaScript来...