jQuery_jquery를 사용하여 선택 드롭다운 상자를 시뮬레이션하는 간단한 샘플 코드

아티스트들은 기본 선택 드롭다운 상자가 보기 흉하다고 생각하는 경우가 많으며(특히 오른쪽의 드롭다운 화살표 버튼) 일반적으로 이 버튼을 대체하기 위해 맞춤 아이콘을 사용하는 것을 좋아합니다. 이런식으로 js div로만 시뮬레이션을 할 수 있어서 고민 끝에 jQuery로 시뮬레이션을 하게 되었습니다. 물론 인터넷에 그런 글이 많이 있지만 찾아보기엔 너무 게으른데요

코드 복사 코드는 다음과 같습니다.

   
   
   
   
   
< /head>

   

                    href="#" onclick="showExpand('txt_city','city_select1','expand')">▼

           

               
• SH 上海
                 
• BJ 北京

              
• HZ 杭州

               
• WH 武汉< /a>

               
• NJ 南京

              
• < ;a href="javascript:void(0)">WX 无锡

           

       

        < input type="text" value="" id="txt_city2" class="input_expand"  />           href="#" onclick="showExpand('txt_city2','city_select2','expand' )">▼
       

           

              
• CN 中文

               
• EN 英语< /li>
                 
• JP 日本

              
• RA 俄语

               
• FA 法语
                 
• 00 其它

           

  

  

  
  

  
   

无图无真无图无真此：

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