jquery实现模拟select下拉框效果

zoukankan html css js c++ java

jquery实现模拟select下拉框效果
<IGNORE_JS_OP style="WORD-WRAP: break-word">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DIV模拟select下拉菜单</title>

<style type="text/css">

.mod_select{position:absolute;left:30%;top:100px;font-familY:Arial, Helvetica, sans-serif;}

.mod_select ul{margin:0;padding:0;}

.mod_select ul li{list-style-type:none;float:left;margin-left:20px;height:24px;}

.select_label{color:#982F4D;float:left;line-height:24px;padding-right:10px;font-size:12px;font-weight:700;}

.select_box{float:left;border:solid 1px #EDE7D6;color:#444;position:relative;cursor:pointer;165px;background:url(../select_bg.jpg) repeat-x;font-size:12px;}

.selet_open{display:inline-block;border-left:solid 1px #E5E5E5;position:absolute;right:0;top:0;30px;height:24px;background:url(../select_up.jpg) no-repeat center center;}

.select_txt{display:inline-block;padding-left:10px;135px;line-height:24px;height:24px;cursor:text;overflow:hidden;}

.option{165px;;border:solid 1px #EDE7D6;position:absolute;top:24px;left:-1px;z-index:2;overflow:hidden;display:none;}

.option a{display:block;height:26px;line-height:26px;text-align:left;padding:0 10px;100%;background:#fff;}

.option a:hover{background:#FDE0E5;}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".select_box").click(function(event){

event.stopPropagation();

$(this).find(".option").toggle();

$(this).parent().siblings().find(".option").hide();

});

$(document).click(function(event){

var eo=$(event.target);

if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)

$('.option').hide();

});

/*赋值给文本框*/

$(".option a").click(function(){

var value=$(this).text();

$(this).parent().siblings(".select_txt").text(value);

$("#select_value").val(value)

})

  })

</script>

</head>

<body>

<div class="mod_select">

<ul>

   <li>

         <span class="select_label">sort buy:</span>

         <div class="select_box">

         <span class="select_txt"></span><a class="selet_open"><b></b></a>

         <div class="option">

               <a>1</a>

                  <a>2</a>

                  <a>3</a>

            </div>

         </div>

         <br clear="all" />

      </li>

   <li>

         <span class="select_label">View:</span>

         <div class="select_box">

         <span class="select_txt"></span><a class="selet_open"></a>

         <div class="option">

               <a>1</a>

                  <a>2</a>

                  <a>3</a>

            </div>

         </div>

      </li>

</ul>

<input type="hidden" id="select_value" />

</div>

</body>

</html>

复制代码
查看全文

相关阅读:
c#基于事件模型的UDP通讯框架(适用于网络包编解码)
菜鸟的mongoDB学习－－－（五）MongoDB的limit、skip、sort方法
 Session管理之ThreadLocal
java中a++和++a在较复杂的运算中分析
 Spring2.5学习4.2_Proxy实现动态代理（目标类实现随意接口）
申请美国签证超具体流程
 Class 与 new的配合使用
 关注PHPthinking官网微信公众号——红包来袭
 oracle-sql优化器
 POJ 2184 Cow Exhibition

原文地址：https://www.cnblogs.com/wangluochong/p/3787886.html