脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-使用CSS和jQuery 模拟select，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 XML/HTML Code

<p id="dropdown"> &nbsp;

    <p>请选择城市</p>  

    <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>  

</p>  

<p id="result"></p>  

 

JavaScript Code

<script tyPE="text/javascript">  

$(function(){  

    $("#dropdown p").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();  

        $("#dropdown p").htML(txt);  

        var value = $(this).attr("rel");  

        $("#dropdown ul").hide();  

        $("#result").html("您选择了"+txt+"，值为："+value);  

    });  

      

});  

</script>  

 

CSS Code

#dropdown{width:186px; margin:100px auto; posITion:relative}  

#dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat rightright 4px; color:#807a62; cursor:pointer}  

#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}  

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-使用CSS和jQuery 模拟select全部内容，希望文章能够帮你解决javascript代码实例教程-使用CSS和jQuery 模拟select所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。