ul+js模擬select

html

css .select_box{float: left; } .select_box input{width: 160px;height: 30px;text-align: center;font-size: 18px;color: #444; } .select_ul{font-size: 14px;text-align: center;border: 1px solid #D2D3D3; } .select_ul li{height: 50px;line-height: 50px; } .select_ul li:hover{background-color: #4EC0EC; }

　　js

$(".select_box input").click(function(){var thisinput=$(this);var thisul=$(this).parent().find("ul");if(thisul.css("display")=="none"){ // if(thisul.height()>200){thisul.css({height:"200"+"px","overflow-y":"scroll" })};thisul.fadeIn("100");thisul.hover(function(){},function(){thisul.fadeOut("100");})thisul.find("li").click(function(){thisinput.val($(this).text());thisul.fadeOut("100");}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});}else{thisul.fadeOut("fast");}}) // $("#submit").click(function(){ // var endinfo=""; // $(".select_box input:text").each(function(i){ // endinfo=endinfo+(i+1)+":"+$(this).val()+";\n"; // }) // alert(endinfo); // })

　　

posted on 2014-12-19 15:02 玲兒靈 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/jymz/p/4173926.html

總結

以上是生活随笔為你收集整理的ul+js模拟select的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。