`
化蝶自在飞
  • 浏览: 2333178 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

js 搜索下拉框select并选中 移动目标option置顶的示例

阅读更多
有时候,一个下拉框元素太多了就不方便选择了.可能你也有同样的感慨,拉上来拉下去就是找不到要的选项.现在就来实现一个效果:js 搜索下拉框select并选中目标选项.

先上一个完整的示例,你自己另存为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" >&nbsp;&nbsp;&nbsp;&nbsp;车内舒适用品</option><option value="16" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;夏季凉垫</option><option value="23" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车载冰箱</option><option value="20" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车用空调被</option><option value="17" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;冬季毛垫</option><option value="24" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;遮阳挡</option><option value="21" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车颈枕</option><option value="18" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车腰靠</option><option value="22" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车布艺</option><option value="19" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车抱枕</option><option value="59" >&nbsp;&nbsp;&nbsp;&nbsp;汽车防盗用品</option><option value="123" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方向盘锁</option><option value="124" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;排挡锁</option><option value="125" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;防盗器</option><option value="39" >&nbsp;&nbsp;&nbsp;&nbsp;汽车香水</option><option value="45" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;挂饰香水</option><option value="42" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高级香水</option><option value="46" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出风口香水</option><option value="43" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;香水补充液</option><option value="40" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水晶香水</option><option value="44" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车香膏</option><option value="41" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;卡通香水</option><option value="60" >&nbsp;&nbsp;&nbsp;&nbsp;车主个人用品</option><option value="68" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车钥匙扣</option><option value="129" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赛车服帽</option><option value="126" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车载剃须刀</option><option value="130" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打火机</option><option value="127" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车CD盒</option><option value="67" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;驾驶证套</option><option value="128" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;司机眼镜</option><option value="6" >&nbsp;&nbsp;&nbsp;&nbsp;车内装饰用品</option><option value="13" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;安全带套</option><option value="8" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方向盘套</option><option value="14" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;卡通公仔</option><option value="9" selected='ture'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车挂饰</option><option value="15" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;排挡套</option><option value="12" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;后视镜套</option><option value="10" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;太阳能公仔</option><option value="7" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车座套</option><option value="54" >&nbsp;&nbsp;&nbsp;&nbsp;车内空气清新</option><option value="56" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车除菌剂</option><option value="57" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空气清新剂</option><option value="58" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车氧吧</option><option value="55" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车用竹炭</option><option value="47" >&nbsp;&nbsp;&nbsp;&nbsp;车内清洁用品</option><option value="48" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车脚垫</option><option value="53" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车载吸尘器</option><option value="50" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车用纸巾盒</option><option value="49" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;后备箱垫</option><option value="51" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;擦车巾</option><option value="52" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;皮革护理</option><option value="25" >&nbsp;&nbsp;&nbsp;&nbsp;车内功能用品</option><option value="32" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点烟器</option><option value="29" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;眼镜票据夹</option><option value="26" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年检袋</option><option value="36" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;指南针球</option><option value="33" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;烟灰缸</option><option value="30" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机架</option><option value="27" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;逆变器</option><option value="37" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;防滑垫</option><option value="34" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车钟表</option><option value="31" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机车充</option><option value="28" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;助力把球</option><option value="38" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车用衣架</option><option value="35" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;温湿度计</option><option value="5" >改装配件</option><option value="144" >&nbsp;&nbsp;&nbsp;&nbsp;汽车改装与配件</option><option value="148" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;脚踏板</option><option value="145" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;灯框灯罩</option><option value="158" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发动机保护板</option><option value="155" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;挡泥板</option><option value="152" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;迎宾踏板</option><option value="149" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门拉手</option><option value="146" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;雨刮片</option><option value="143" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;后护板</option><option value="156" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;气门嘴</option><option value="153" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尾喉消声器</option><option value="150" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车门碗</option><option value="147" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车雨挡</option><option value="157" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;扶手箱</option><option value="154" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出风口</option><option value="151" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;油箱盖</option><option value="2" >汽车护理</option><option value="62" >&nbsp;&nbsp;&nbsp;&nbsp;车外装饰与功能</option><option value="132" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车天线</option><option value="91" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金属小车贴</option><option value="136" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车牌架</option><option value="133" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除静电带</option><option value="92" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;个性车贴</option><option value="137" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;警示牌</option><option value="134" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全车车贴</option><option value="131" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;油箱贴</option><option value="90" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车标志</option><option value="135" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;装饰灯</option><option value="63" >&nbsp;&nbsp;&nbsp;&nbsp;汽车护理与美容</option><option value="84" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机油排挡油</option><option value="81" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;抗磨修复剂</option><option value="78" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车车衣</option><option value="75" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;清洁剂</option><option value="72" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;去污蜡</option><option value="69" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;底盘装甲</option><option value="82" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水箱宝</option><option value="79" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车补漆笔</option><option value="76" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;清洁打蜡工具</option><option value="73" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;修复蜡</option><option value="70" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;镀膜釉</option><option value="83" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贴膜工具</option><option value="80" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;防撞条</option><option value="77" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;防冻液</option><option value="74" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;轮胎蜡</option><option value="71" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;光泽蜡</option><option value="3" >汽车电子</option><option value="61" >&nbsp;&nbsp;&nbsp;&nbsp;汽车影音</option><option value="100" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车载DVD</option><option value="97" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车载MP3</option><option value="101" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽车音响</option><option value="98" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车载MP4</option><option value="99" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;蓝牙免提</option><option value="4" >户外驾驶</option><option value="88" >&nbsp;&nbsp;&nbsp;&nbsp;汽车照明</option><option value="139" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;氙气灯</option><option value="140" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大灯增光器</option><option value="138" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车顶灯</option><option value="85" >&nbsp;&nbsp;&nbsp;&nbsp;安全驾驶用品</option><option value="94" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;倒车摄像头</option><option value="107" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;防驾驶疲劳</option><option value="104" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打气泵</option><option value="95" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电子狗</option><option value="108" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;儿童安全椅</option><option value="105" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胎压计</option><option value="102" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;倒车雷达</option><option value="96" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GPS导航</option><option value="93" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;缓冲器</option><option value="106" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大视野镜</option><option value="103" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;玻璃防雾剂</option><option value="89" >&nbsp;&nbsp;&nbsp;&nbsp;汽车省油</option><option value="142" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;省油器</option><option value="141" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;燃油添加剂</option><option value="86" >&nbsp;&nbsp;&nbsp;&nbsp;应急用品</option><option value="113" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;维修工具</option><option value="110" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;警示三角架</option><option value="114" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;启动电源</option><option value="111" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拖车绳</option><option value="112" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;暴闪灯</option><option value="109" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;车用灭火器</option><option value="87" >&nbsp;&nbsp;&nbsp;&nbsp;汽车旅行用品</option><option value="116" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;折叠桌椅</option><option value="120" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水壶水囊</option><option value="117" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;野营工具</option><option value="121" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;储备油箱</option><option value="118" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帐篷睡袋</option><option value="115" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;野营灯</option><option value="122" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;对讲机</option><option value="119" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;背包背囊</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.
分享到:
评论
1 楼 waiting 2010-10-27  
用jQuery.autocomplete插件吧, 官网上那个 combobox的示例。 或者到我博客里面找。

相关推荐

    Bootstrap框架下下拉框select搜索功能

    Bootstrap框架是一款流行的前端开发框架,它提供了一系列的CSS和JavaScript组件,帮助开发者快速构建响应式、移动优先的网页。在Bootstrap中,下拉框(select)通常用于创建一个可选的列表,用户可以通过点击下拉...

    jQuery手机下拉框select

    `jQuery手机下拉框select` 主要关注于改善移动端的用户体验,通过JavaScript和CSS增强下拉框的外观和功能。 ### jQuery Mobile Select Menu jQuery Mobile 提供了一个专门的 Select Menu 插件,用于将标准的...

    JQ JS javascript 多选 多选下拉框 select bootstrap-select

    Bootstrap-select则是这个框架的一个扩展,它为下拉框添加了更多样式和功能,比如搜索、分页、分组等。 要使用bootstrap-select,你需要先在项目中引入Bootstrap和jQuery,然后引入bootstrap-select的CSS和JS文件。...

    可文本输入的下拉框select

    无论是原生JavaScript还是前端框架,实现“可文本输入的下拉框select”都需要对DOM操作、事件监听和数据处理有深入理解。在实际项目中,为了提高可维护性和用户体验,开发者还应考虑以下因素: 1. 键盘导航:确保...

    Vue下拉框回显并默认选中随机问题

    Vue下拉框回显并默认选中随机问题通常指的是在使用Vue.js框架和ElementUI组件库开发前端页面时,遇到下拉框组件在数据回显时出现选择状态随机的问题。这一问题可能会导致用户体验下降,因为下拉框中的选项在多次刷新...

    JS实现select选中option触发事件操作示例

    在这个示例中,我们看到两种方法来实现这一目标:一种是纯JavaScript,另一种是使用jQuery库。 对于纯JavaScript的实现,我们可以创建一个`&lt;select&gt;`元素,并为它添加`onchange`事件监听器。当用户改变选中的`...

    Javascript 操作select下拉框

    ### JavaScript 操作 Select 下拉框的关键知识点 在 Web 开发中,`&lt;select&gt;` 元素用于创建下拉列表(或选择框)。这些选择框在用户界面中非常常见,可以用来收集用户输入的信息,比如让用户从一系列选项中选择一个...

    jQuery下拉框图片选择特效imageselect.js示例

    本示例“jQuery下拉框图片选择特效imageselect.js”是利用jQuery的强大力量来提升用户界面的美观性和交互性。在这个项目中,我们将会探讨如何使用这个插件来实现一个具有图片选择功能的下拉菜单,从而让传统的...

    如何获取select下拉框的值(option没有及有value属性)

    如何获取select下拉框的值: 1.下拉框的option没有value属性时 代码如下: &lt;select id=”param1″&gt; &lt;option&gt;学号&lt;/option&gt; &lt;option&gt;姓名&lt;/option&gt; &lt;option&gt;年龄&lt;/option&gt; &lt;/seclect&gt; [removed] [removed] = ...

    用js实现两个select下拉框之间的元素互相移动

    本文将深入探讨如何使用JavaScript实现两个Select下拉框之间的元素互相移动的功能。这一功能常见于需要动态调整选项归属的情景,例如在多选设置或数据分类中。 首先,我们需要创建两个Select元素,分别命名为`...

    select下拉框添加搜索功能

    为了提高用户的操作效率,我们常常需要在`select`下拉框中集成搜索功能,让用户能够通过输入关键字快速找到所需选项。这就是"select下拉框添加搜索功能"这个知识点的核心所在。 在`select`下拉框中实现搜索功能,...

    bootstrap select 下拉框通过拼音搜索汉字

    在“bootstrap select 下拉框通过拼音搜索汉字”这个实例中,我们关注的重点是如何利用该插件实现通过输入拼音来搜索并筛选汉字的功能,这对于中文环境下的用户体验提升有着显著的作用。 首先,我们要了解Bootstrap...

    JQ JS javascript layui UI框架 带搜索下拉框 select

    本示例中,"JQ JS javascript layui UI框架 带搜索下拉框 select" 是一个基于jQuery和layui的特定功能实现,即在layui的UI设计中创建了一个具有搜索功能的下拉选择框。这个功能在许多网页应用中都很常见,例如在表单...

    js多选下拉框多选下拉框多选下拉框

    JavaScript(简称js)作为客户端脚本语言,常被用来增强网页的交互性,其中包括实现多选下拉框的功能。本文将深入探讨如何使用JavaScript来创建和操作多选下拉框。 首先,HTML基础是构建多选下拉框的起点。一个基本...

    select 下拉框可以多选

    在网页设计和开发中,`select`元素是用于创建下拉菜单的标准HTML组件...在压缩包文件中的"select下拉框多选"示例,可能会包含一个实现这一功能的完整HTML页面、CSS样式表和可能的JavaScript脚本,供学习者参考和实践。

    下拉框多选select多选

    在网页设计和开发中,"下拉框多选select多选"是一个常见的功能,它允许用户在下拉菜单中选择多个选项,而不仅仅是一个。在HTML中,`&lt;select&gt;`元素通常用于创建这样的下拉菜单,但默认情况下,`&lt;select&gt;`只支持单选。...

    JQ JS javascript bootstrap 带搜索 下拉框 select

    在IT领域,尤其是在Web开发中,`JQ`、`JS`、`javascript`和`bootstrap`是四个非常重要的概念。这些技术共同构建了交互性强、用户体验良好的网页应用。让我们详细了解一下这些知识点。 首先,`javascript`是网页开发...

    JS实现左边的下拉框内容移动到右边下拉框,支持内容上下移动

    标题中的“JS实现左边的下拉框内容移动到右边下拉框,支持内容上下移动”是一个常见的前端交互功能,常用于表单或者过滤选择场景。这个功能涉及到JavaScript的基础知识,DOM操作,事件处理以及可能的AJAX技术。下面...

    js实现下拉框选择要显示图片的方法

    在JavaScript中,下拉框通常是通过`&lt;select&gt;`元素来实现的。而图片的显示通常与`&lt;img&gt;`标签相关联。在实际开发中,我们可能会遇到一种需求,即通过下拉框选择来控制图片的显示。本文将详细介绍如何使用JavaScript来...

Global site tag (gtag.js) - Google Analytics