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

$(".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相关推荐

css div 下拉框内容自适应,div+css模拟select下拉框
无标题文档 .mod_select ul{margin:0;padding:0;} .mod_select ul:after{ display: block; clear: both; visibil ...
练习作品，javascript模拟select
记录一个自己作的小作品,一个js模拟的select. 最近迷茫于javascript的闭包与继承,写一个小东西找找感觉. 这个作品在没有任何需求下完成,不保证能应用于实际应用,仅用于自娱自乐. 浏览器 ...
使用ajax创建ul,联合县城市，采用ajax，而使用ul模拟select下拉
接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){ $("#province ul&quo ...
html点击下拉框无反应,js模拟点击select，但是没有弹出下拉框。
实在是找不到很好的解决方法了,于是利用列表和js来模拟select了. 代码如下,如果有更好的方法请告诉我一声,谢谢. Document body { display: flex; flex-dire ...
html下拉列表用ul,Vue.js做select下拉列表的实例(ul-li标签仿select标签)
目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表. 知识点: 组件的写法及运用组件之间的数据传递(props的运用) 组件之间的数据传递($emit的运用) 动态数 ...
js模拟表单html形式,JS模拟并美化的表单控件完整实例
本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法: ...
Js模拟下拉框（select-option）的实现
js模拟下拉框今天想给大家分享一下之前自己做的一个js模拟下拉框,所有select-option中我能发现的操作,都在我的代码中将其实现,希望对大家有所帮助.如果select中还有一些本人未实现的希 ...
div模拟select/option解决兼容性问题及增加可拓展性
个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...
ajax多选下拉,模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）(示例代码)...
模拟select下拉框之多选 }ul,li{list-style:none; }#test{margin:20px 10px; }.clearfix:before, .clearfix:after{c ...

ul+js模拟select

ul+js模拟select相关推荐

最新文章

热门文章