jquery 模拟select ，取select的值并模拟select，点击动作同步 - -

最新推荐文章于 2018-06-29 11:36:47 发布

置顶风一样的胖叔叔

最新推荐文章于 2018-06-29 11:36:47 发布

阅读量958

点赞数

文章标签： jquery function border xhtml float class

本文链接：https://blog.csdn.net/zhiyuan110/article/details/7743989

版权

自己写的一个插件呵呵。有兴趣的大家可以扒下去看看。。。

<!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>jQuery理解中</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
*{ margin:0; padding:0;}
body{ padding-top:40px; font-size:12px;}
a{ color:#333; text-decoration:none;}
.f_sele{ display:block; width:150px; height:23px; border:1px solid #ccc; text-indent:10px; margin-left:20px; background:#f9f9f9; float:left;}
.f_sele dt{ display:block; width:148px; height:23px; position:relative; line-height:23px;}
.f_sele dt div{ font-weight:bold; color:red; line-height:23px;}
.f_sele dt ul{ list-style:none; position:absolute; top:23px; left:-1px; display:block; border:1px solid #ccc; overflow:hidden; background:#fff; width:148px; font-size:12px; text-indent:9px; padding:1px;}
.f_sele dt ul li{ display:block; line-height:23px; cursor:pointer; height:23px;}
.f_sele dt ul li:hover{ background:#f9f9f9; color:red;}
</style>
</head>
<body>
<select id="test1" style="margin-left:100px; float:left;">
<option>上海市</option>
<option>江苏省</option>
<option>安徽省</option>
<option>湖南省</option>
<option>湖北省</option>
<option>天津市</option>
</select>
<script>
$(document).ready(function()
{
var inhtml = $("#test1").html();
var lihtml = $("#test1 option:eq(0)").html();
$("#test1").after("<dl class='f_sele'><dt><div id='test'></div><ul></ul></dt></dl>");
$(inhtml).appendTo(".f_sele dt ul");
$(".f_sele dt div").append(lihtml);

$(".f_sele option").each(function()
{
$(this).replaceWith('<li class="">' + this.innerHTML + '</li>');
});

$(".f_sele dt ul li").click(function()
{
var num_x = ($(this).index()); // 获取当前点击索引
$("#test1").get(0).selectedIndex= num_x; // 给select option 点击事件也算不上事件，就是把对应的option值给显示出来
});

//以下是模拟select代码
$(".f_sele dt ul").hide();
$(".f_sele dt").mouseover(function()
{
$(".f_sele dt ul").show();
});

$(".f_sele dt").mouseout(function()
{
$(".f_sele dt ul").hide();
});

$(".f_sele dt ul li").click(function()
{
$("#test").html($(this).html());
$(".f_sele dt ul").hide();

});
});
</script>
</body>
</html>