div 模拟<select>事件】的更多相关文章

IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> <meta charset="utf-8"> <title>div模拟select</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js&…
个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此导致在IE8及以下版本浏览器中的各种问题. 这个模拟思路很简单,也很清晰,我就直接上代码了 html: 第一层div是模拟select标签,第二层div是模拟option下拉列表 <div> <div class="sim-select"></div>…
没有办法,平时不是万不得已我是不喜欢去模拟各类控件的,一个是麻烦,二个是对性能也有些影响,还是原生的来的实在.老板昨天发话,必须模拟赶紧的,老外最喜欢简洁干净的风格,说的貌似都很在理的样子,业务部也是一样,都是一些不懂产品的人来提需求哈哈,不说啦.功能也不难就是多耗了我一点点时间,本来是不用做的,任务早就做完了.为了满足老板提的需求我还是改了,尊重她的选择,毕竟人家是老板,这叫“做事不依东,累死都无功”,在读我文章的朋友们你要牢记了. 下面直接看我代码. <!DOCTYPE html PUBLI…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD> <SCRIPT type="text/javascript" src="./jquery.js"></SCRIPT> <STYLE>…
<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/xh…
一.问题 不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变 二.经过 刚开始查看layui官方文档,发现仅仅只是有select监听事件,即: form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 }); 但是,这个事件需要操作页面,不可取. 三.结果 查…
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>案例测试</title> <link rel="stylesheet" href="css/all.css" /> <script type="text/javascript" src="js/jquery…
好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (function($){ //模拟下拉框 $.fn.htmlSelect = function(opt){ if($(this).length==0) return false; var opts = $.extend({ defaultsItem : 0, //默认选中的select项 saveInput…
原文 jquery用div模拟一个下拉列表框 今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我感觉还有焦点获取效果没模拟出来,现在实在没想到好的办法,如果您有好的方法和思路,欢迎并谢谢你能告诉我. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <ti…
<!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-…