jquery中select下拉框按首字母或拼音筛选

 代码如下 复制代码

<html>
<head>
    <title>列表筛选</title>

<script type="text/javascript" src="jQuery19.js"></script>
<script type="text/javascript" ></script>
<script type="text/javascript" >
function filteroption(root) {  //初始化列表，参数为列表id
    var tempul;
    tempul = $("#" + root).clone(true);
    tempul.children().each(function() {
        var htmword = $(this).html();
        var pyword = $(this).toPinyin();
        var supperword = "";
        pyword.replace(/[A-Z]/g, function(word) { supperword += word });
        $(this).attr("mka", (htmword).toLowerCase());
        $(this).attr("mkb", (pyword).toLowerCase());
        $(this).attr("mkc", (supperword).toLowerCase());
    });
    window[root] = tempul;
}

//筛选符合的列表项
function resetOption(keys, root) {
    keys = keys.toLowerCase();
    $("#" + root).children().remove();
    var duplul = $(window[root]);
    if (keys.length <= 0) {
        duplul.children().each(function() {
        $("#" + root).append($(this).clone(true).removeAttr("mka").removeAttr("mkb").removeAttr("mkc")); 
        });
        return;
    }
    duplul.children('[mka*="' + keys + '"],[mkb*="' + keys + '"],[mkc*="' + keys + '"]').each(function() {
    $("#" + root).append($(this).clone(true).removeAttr("mka").removeAttr("mkb").removeAttr("mkc"));
    });
}
</script>

 

    <script type="text/javascript">
        $(document).ready(function() {
            filteroption("ullist"); //初始化列表,参数为ul或者select的id
            filteroption("sellist");
        });
        function search() {
            resetOption($.trim($("#txt_search").val()), "ullist");  //搜索时调用的方法，参数为关键字内容和ul或者select的id
        }
       
    </script>

</head>
<body>
    拼音、首字母、汉字：<input type="text" id="txt_search" />
    <input type="button" id="btn_search" onclick="search()" value="UlSearch" />
    <ul id="ullist">
        <li>我是女生</li>
        <li>我是女神</li>
        <li>可爱的女生</li>
        <li>昨夜的雨一直下着</li>
        <li>从此只有孤独寂寞陪伴着我</li>
        <li>看着你消失在我的视线</li>
        <li>一生一世和你相偎相依</li>
        <li>如果还有那么一天</li>
        <li>老天能让我和你相恋</li>
    </ul>
   
    拼音、首字母、汉字：<input type="text" id="txt_sel_search" />
    <input type="button" id="btn_sel_search" onclick='resetOption($.trim($("#txt_sel_search").val()), "sellist")' value="SelectSearch" />
    <p>
    <select id="sellist" multiple="multiple" style=" height:150px;">
        <option>我们之间没有延伸的关系</option>
        <option>只在黎明混着夜色时</option>
        <option>才有浅浅重叠的片刻</option>
        <option>不懂那月亮的盈缺</option>
        <option>像白天不懂夜的黑</option>
        <option>你永远不懂我伤悲</option>
        <option>像永恒燃烧的太阳</option>
        <option>不懂那星星为何会坠跌</option>
        <option>我们仍坚持各自等在原地</option>
    </select>
    </p>
</body>
</html>

完整实例下载地址：http://down.111cn.net/mbs/2013/1/0114/9/select.rar

时间： 2024-09-17 03:58:51

jquery中select下拉框按首字母或拼音筛选的相关文章

基于jQuery的select下拉框选择触发事件实例分析_jquery

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

用jQuery模拟select下拉框的简单示例代码

 本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

jQuery操作select下拉框的text值和value值的方法_jquery

1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

jquery实现select下拉框美化特效代码分享_javascript技巧

这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码.  为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&

jQuery模拟select下拉框方法总结

例1,利用div+ul实现实例 因为在IE6下,表单元素select的高度实在不好控制,即使让其和其他元素看起来一样高宽相符,那也仅仅是通过内边距进行的一种视觉误差实现的,而且呢,select控件的滚动条也难看. 正是如此,才会有很多人用div+ul来模拟select下拉框. HTML代码如下,简简单单,一个外div,嵌套一个input和一个ul列表(input用于提交选中的数据):      代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

javascript中select下拉框的用法总结_javascript技巧

本文针对开发项目中遇到的问题,进行了汇总问题1:如何选择select的option里面的值? 首先会用到一个方法 onchange():这个方法主要用于触发,选择框内容改变时间 实现代码: <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="

用jQuery模拟select下拉框

很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找,又重新发明轮子鸟:) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

利用jquery获取select下拉框的值_jquery

jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class="form-control" id="iv_level"> <option value="">店员</option> <option value="">店长</option>

用jQuery模拟select下拉框的简单示例代码_jquery

很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t