模拟实现select下拉菜单实例代码

模拟实现select下拉菜单实例代码:
select下拉菜单是一种非常方便的控件，美中不足的是，就是外观的可塑性太差，所以有时候需要模拟实现此效果，下面就通过代码实例简单介绍一下如何实现此效果，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<meta charset="utf-8">
<style type="text/css">
body 
{
  padding:0;
  margin:0;
  font-size:12px;
}
ul, li 
{
  list-style:none;
  padding:0;
  margin:0;
}
#dropdown 
{
  width:186px;
  margin:100px auto;
  position:relative
}
.input_select 
{
  width:150px;
  height:24px;
  line-height:24px;
  padding-left:4px;
  padding-right:30px;
  border:1px solid #a9c9e2;
  color:#807a62;
}
#dropdown ul 
{
  width:184px;
  background:#e8f5fe;
  margin-top:2px;
  border:1px solid #a9c9e2;
  position:absolute;
  display:none
}
#dropdown ul li 
{
  height:24px;
  line-height:24px;
  text-indent:10px
}
#dropdown ul li a 
{
  display:block;
  height:24px;
  color:#807a62;
  text-decoration:none
}
#dropdown ul li a:hover 
{
  background:#c6dbfc;
  color:#369
}
#result 
{
  margin-top:10px;
  text-align:center
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $(".input_select").click(function(){ 
    var ul=$("#dropdown ul"); 
    if(ul.css("display")=="none")
    { 
      ul.slideDown("fast"); 
    }
    else
    { 
      ul.slideUp("fast"); 
    } 
  }); 
  $("#dropdown ul li a").click(function(){ 
    var txt = $(this).text(); 
    $(".input_select").val(txt); 
    var value = $(this).attr("rel"); 
    $("#dropdown ul").hide(); 
    $("#result").html("您选择了"+txt+"，值为："+value); 
  }); 
}); 
</script>
</head>
<body>
<div id="dropdown">
  <input class="input_select" type="text" value="请选择城市"/>
  <ul>
    <li><a href="#" rel="2">北京</a></li>
    <li><a href="#" rel="3">上海</a></li>
    <li><a href="#" rel="4">武汉</a></li>
    <li><a href="#" rel="5">广州</a></li>
  </ul>
</div>
<div id="result"></div>
</body>
</html>

以上代码实现了我们想要的功能，当点击文本框的时候能够出现下拉菜单，代码非常简单，这里就不多介绍了，因为在本站中已经提供过类似的介绍，可以参阅利用jQuery模拟实现select下拉框一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9753

更多内容可以参阅:http://www.softwhy.com/jquery/

模拟实现select下拉菜单实例代码

猜你喜欢