关于jquery模仿select下拉选项

最新推荐文章于 2025-05-14 16:45:06 发布

原创最新推荐文章于 2025-05-14 16:45:06 发布 · 682 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #select

本文介绍了一个简单的地区选择器组件的实现方法，通过HTML、CSS和jQuery结合使用来创建一个交互式的下拉菜单，用于选择不同的地区选项如北京、上海等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：<div class="sleAreaDiv">
<span>选择地区</span>
<div class="sleAreaHidden">

</div>

css代码：

.sleAreaDiv{width:109px;border:1px solid #ccc;height:30px;line-height:30px;text-align:left;text-indent:1em;background: #fff url(../images/logo.png) no-repeat -648px -132px;position:relative;cursor:pointer;}

.sleAreaHidden{width:100%;border:1px solid #ccc;position:absolute;left:-1px;visibility:hidden;background:#fff;}

.sleAreaHidden .sleAreaLi{height:25px;}

jquery代码（要先引用jquery文件）：

$(document).ready(function(){

select('sleAreaDiv','sleAreaHidden','sleAreaLi','#bf3982','#666','white');

}）

function select(selectDiv,selectHidden,selectLi,bgcolor,precolor,color){
$('.'+selectDiv).click(function(){

        $('.'+selectDiv).children('.'+selectHidden).css('visibility','hidden');
        $(this).children('.'+selectHidden).css('visibility','visible');
   })
   $('.'+selectLi).mouseover(function(){
       $('.'+selectLi).css({'background':'none','color':precolor});
       $(this).css({'background':bgcolor,'cursor':'pointer','color':color});
   })
   $('.'+selectLi).click(function(event){
       event.stopPropagation();//防止触发事件冒泡到父元素
       $(this).parent().css('visibility','hidden');
       $(this).parent().parent().children('span').html($(this).html());
   })
}