本文实例讲述了框架模拟超文本标记语言下拉多选框的原生实现方法。分享给大家供大家参考，具体如下：

用js，html，css简单的实现一个超文本标记语言下拉多选框，不试用其他框架的情况下，可以借鉴一下，如果用jqueryUI，BOOTSTRAP，就没必要参考了。毕竟那些现成的东西更好用。

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www .JB 51。net Jquery模拟select/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本样式正文{ font : normal 14px/100% ' Andale Mono '，Andale Mono，monospacecolor : # fffpadding : 50px宽度： 300像素；margin: 0自动背景色： # 374954;}.下拉列表{ position : absolute top :50%；transform : translateY(-50%)；} a { color: # fff}。下拉菜单dd ,下拉dt { margin : 0pxpadding : 0px }。下拉列表ul { margin :-1px 0 0；}.下拉dd {相对位置： }。下拉列表a .下拉列表a :已访问{ color: # fff文本装饰：无；大纲：无；font-size : 12px}.下拉菜单dt a {底色： # 4F 6877显示器：块；padding: 8px 20px 5px 10px最小高度： 25px线高： 24px飞越：隐藏；边框： 0；宽度： 272像素；}.下拉菜单multiSel span { cursor:指针；显示器：内联块；padding: 0 5px 2px 0 }。下拉菜单DD ul {底色： # 4F 6877边框： 0；color: # fffdisplay:无；left : 0pxpadding : 2px 15px 2px 5px绝对位置：top: 2px宽度： 240像素；列表样式：无；height: auto飞越：汽车；页边距-顶部：30 px}.下拉span.value { display: none}。下拉菜单dd ul阿利{ padding: 5pxdisplay:块；}.下拉菜单DD ul阿利：悬停{背景色： # fff}按钮{底色： # 6bbe 92宽度： 302 px边框： 0；padd : 10px 0；边距： 5px 0；文本对齐：中心；color : # fff-weight :粗体；}/style/head dydl class=' drop down ' dt div style=' div class=' MultiSL ' style=' width :150 px；背景# fffpadding: 8px 20px 5px 10px高度：20 pxcolor : # 000 ' float : left '/div div class=' my drop down ' style=' width :50 px；背景# fffpadding: 8px 20px 5px 10px高度：20 pxcolor : # 000 ' float : left ' SSS/div/div/dt DD div class=' mut Lise ' ul Li输入类型='复选框'值='苹果'/苹果/李莉输入类型='复选框'值='黑莓'/黑莓/li输入类型='复选框'值='HTC' /HTC/li输入类型='复选框'值='索尼埃里克森'/索尼埃里克森/li输入类型='复选框'值='摩托罗拉'/摩托罗拉/li输入类型='复选框'值='诺基亚'/诺基亚/Li/ul/div/下拉dt .我的下拉菜单).on('click '，function() { $(').下拉列表滑动切换(“快速”)；});$('.下拉菜单"阿利"。on('click '，function() { $(').下拉列表hide()；});函数getSelectedValue(id){ return $(“#”id).查找(' dt a span.value ').html()；}$(文档)。bind('click '，function(e){ var $ clicked=$(e . target)；if(！$clicked.parents().有类(' down ')$(' .下拉列表hide()；});$('.多重选择输入[类型='复选框']')。on('click ')，function() { var title=$(this).最近的('。选择')。查找(' input[type='checkbox']').val()，title=$(this).val()'，'；if ($(this).is(' : checked '){ var html=' span title=' title ' ' ' title '/span '；$('.multisl ' .追加(html)；} else { $(' span[title=' title ' ']').移除();}});/脚本/正文/html运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery页面元素操作技巧汇总》 、 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 及《jquery选择器用法总结》

希望本文对大家的jQuery程序设计有所帮助。