提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery模拟代码 简单 示例 SELECT 下拉框
2023-06-13 09:15:16 时间

很多时候，美工会觉得默认的select下拉框很难看（特别是右侧的下拉箭头按钮），他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用js+div来模拟了，倒腾了一番，用jQuery模拟了下，当然网上这种文章也不少，只是懒得去看找

复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
   <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
   <title>自己实现的下拉框</title>
   <styletype="text/css"media="all">
       *{font-size:12px;line-height:18px;list-style:none;padding:0;margin:0;text-decoration:none;color:#000;border:0}
       .page{text-align:center;margin:50px;}
       input{border-bottom:solid1px#ccc;height:18px}             
       .expand{display:none;position:absolute;width:200px;height:100px;overflow-y:auto;border:solid1px#ccc};
  .expandli{margin:1px0;background:#fff}
       .expanda{text-decoration:none;display:block;padding:05px;background:#efefef;margin:1px0}
       .expanda:hover{background:#ff9}
   </style>
   <scripttype="text/javascript"src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
   <scripttype="text/javascript">

       functionshowExpand(targetId,expandId,expand_class){
           //先关掉其它弹出的层
           if(expand_class!=undefined){
               $("."+expand_class).hide();
           }

           //判断是否为IE
           varisIE=(!+[1,]);

           varexpand=$("#"+expandId);
           vartarget=$("#"+targetId);

           vardx=0;
           if(isIE){
               dx=-2;
           }
           else{
               dx=0;
           }
           expand.get(0).style.left=target.get(0).getBoundingClientRect().left+dx+"px";
           if(isIE){
               dx=17;
           }
           else{
               dx=19;
           }
           expand.get(0).style.top=parseInt(target.get(0).getBoundingClientRect().top)+dx+"px";
           expand.show();

           //每个li点击时赋值
           $("#"+expandId).find("li").each(function(i){
               $(this).show().click(function(){
                   target.val($(this).text().split("")[1]);
                   expand.hide();
               })
           })

   
       }
  

       functionsearch(srcId,expandId){
           varexpand=$("#"+expandId);
           varsrc=$("#"+srcId);

           varA=expand.find("a");
           varv=src.val().toUpperCase();

           A.each(function(i){
               if(v.length>=2){
                   if($(this).text().toUpperCase().indexOf(v)==-1){
                       $(this).parent().hide();
                   }
                   else{
                       $(this).parent().show();
                   }
               }
               if(v.length<=0){
                   $(this).parent().show();
               }
           })
           src.val(v);
       }


  $().ready(function(){
   $("#txt_city").keyup(function(){
    search("txt_city","city_select1");
   }).focus(function(){
    showExpand("txt_city","city_select1","expand")
   })

   $("#txt_city2").keyup(function(){
    search("txt_city2","city_select2");
   }).focus(function(){
    showExpand("txt_city2","city_select2","expand")
   })
  })

  functionfnTest(){
   document.getElementById("txtTarget").value=document.getElementById("txtSrc").value;
  }
   </script>
</head>
<body>
   <divclass="page"style="text-align:center">
       <inputtype="text"value=""id="txt_city"class="input_expand" /><a
           href="#"onclick="showExpand("txt_city","city_select1","expand")">?</a>
       <divclass="expand"id="city_select1">
           <ul>
               <li><ahref="javascript:void(0)">SH上海</a></li>
               <li><ahref="javascript:void(0)">BJ北京</a></li>
               <li><ahref="javascript:void(0)">HZ杭州</a></li>
               <li><ahref="javascript:void(0)">WH武汉</a></li>
               <li><ahref="javascript:void(0)">NJ南京</a></li>
               <li><ahref="javascript:void(0)">WX无锡</a></li>
           </ul>
       </div>

       <inputtype="text"value=""id="txt_city2"class="input_expand" /><a
           href="#"onclick="showExpand("txt_city2","city_select2","expand")">?</a>
       <divclass="expand"id="city_select2">
           <ul>
               <li><ahref="javascript:void(0)">CN中文</a></li>
               <li><ahref="javascript:void(0)">EN英语</a></li>
               <li><ahref="javascript:void(0)">JP日本</a></li>
               <li><ahref="javascript:void(0)">RA俄语</a></li>
               <li><ahref="javascript:void(0)">FA法语</a></li>
               <li><ahref="javascript:void(0)">00其它</a></li>
           </ul>
       </div>

  <br/>
  <br/>
  <inputtype="text"id="txtSrc"onkeyup="fnTest()"/>
  <br/>
  <inputtype="text"id="txtTarget"/>
   </div>
</body>
</html>


无图无真相，真相在此：

不足之处：
1、按键盘上下键时，没有高亮的自动移动
2、键入文字自动过滤结果时，感觉相对原生的select有些不自然

相关文章