模拟select的代码

2024-04-08 01:25:02

几年前不知道在哪下载的源码上改的，去年开始学jquery，就改了一下，代码有点乱。
只是自己用，没有考虑写成通用的组件，所以童鞋们如果真的要拿去用的话有点麻烦

几个状态，展开收起是jquery的slide

这个模拟select，只是很简单的实现了单独一个select的部分功能
没有实现比如optgroup，文字长度自适应（图片会因此修改麻烦）
再说如果页面多个select，css处理也麻烦，
数据、联动都要增加大量代码

小有小的好处，所以就不考虑进行封装，
这里有不少童鞋做的比我好很多，功能很强大

再所以，就偷一下懒，在这里送上js注释给初学者

代码如下:

$(document).ready(function(){
var newSelect = $("#aa");
newSelect.click(function(e){
//如果没有class，即关闭状态，就展开
//打开状态就不需要处理，冒泡执行document.click
if(this.className == ""){
this.className = "open";
$(this.nextSibling).slideDown("fast");
e.stopPropagation();//阻止冒泡
}
});

//关闭收起
function closeSelect(obj){
$(obj.nextSibling).slideUp("fast",function(){
obj.className = "";
});
}
$(document).bind("click", function() {
closeSelect(newSelect[0]);
});
newSelect.next().click(function(e){
var src = e.target;

//如果有选中任何一项，取选中文字执行替换操作并改变样式，相当于select.onchange
//冒泡执行document.click关闭收起
if(src.tagName == "A"){
var PObj = src.parentNode;
PObj.previousSibling.innerHTML = src.innerHTML;
$(src).siblings().removeClass();
src.className = "current";
PObj.nextSibling.value = src.getAttribute("value");
}
});
});

演示地址：http://demo.jb51.net/js/2011/jquery_select/
打包下载：http://www.jb51.net/jiaoben/39490.html

模拟select的代码

几年前不知道在哪下载的源码上改的,去年开始学jquery,就改了一下,代码有点乱.只是自己用,没有考虑写成通用的组件,所以童鞋们如果真的要拿去用的话有点麻烦几个状态,展开收起是jquery的slide这个模拟select,只是很简单的实现了单独一个select的部分功能没有实现比如optgroup,文字长度自适应(图片会因此修改麻烦)再说如果页面多个select,css处理也麻烦,数据.联动都要增加大量代码小有小的好处,所以就不考虑进行封装,这里有不少童鞋做的比我好很多,功能很强大再所以,
javascript模拟select实现代码

最近迷茫于javascript的闭包与继承,写一个小东西找找感觉. JS+CSS模拟Select下拉框,选择表单效果网页中使用Select语法实现的下拉框是很普遍的,但是您有没有见过使用JS+CSS模拟的Select下拉框?并且可以选择表单哦,尽管代码复杂了点,但是对于我们了解此类特效非常有帮助. DIV+CSS+JS仿下拉表单 function $$$$$(_sId){ return document.getElementById(_sId); } function hide(_sId) {
js模拟select下拉菜单控件的代码

复制代码代码如下: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <meta charset=utf-8 /> <title>js模拟select</title> </head> <style> *{ marg
使用CSS和jQuery模拟select并附提交后取得数据的代码

模拟select 并带有提交后取得数据的代码 HTML Code 复制代码代码如下: <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#" rel="2">北京</a></li> <li><a href="#" rel="3">上海
JS模拟实现Select效果代码

本文实例讲述了JS模拟实现Select效果代码.分享给大家供大家参考.具体如下: 这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-select-style-demo-codes/ 具体代码如下: <!DOCT
jquery模拟SELECT下拉框取值效果

jquery模拟SELECT框,效果图如下: 复制代码代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框</title> <meta charset="utf-8"> <style> body{padding:0;margin:0;font-size:12px;} ul,li{list-sty
jquery使用ul模拟select实现表单美化的方法

本文实例讲述了jquery使用ul模拟select实现表单美化的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ul模拟select,是jQuery插件实现的Select下拉菜单效果,类似的功能网上已经有一些了,每一款都代表了不同的编程思路,为学习提供一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ul-select-table-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
利用Python实现Windows下的鼠标键盘模拟的实例代码

本文介绍了利用Python实现Windows下的鼠标键盘模拟的实例代码,分享给大家本来用按键精灵是可以实现我的需求,而且更简单,但既然学python ,就看一下呗. 依赖: PyUserInput pip install PyUserInput PyUserInput 依赖 pyhook,所以还得安装 pyhook.按需下载,下载地址. 我是 win10 64 位 python 2.7,用的是第二个,下载之后用解压软件打开,把 pyHook放到C:\Python27\Lib\site-pack
javascript 模拟select下拉列表特效

javascript 模拟select下拉列表特效 by jb51.net function gets_id(objName){ if(document.getElementById){ return eval('document.getElementById("' + objName + '")'); }else if(document.layers){ return eval("document.layers['" + objName +"']&quo
layui问题之模拟select点击事件的实例讲解

一.问题不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变二.经过刚开始查看layui官方文档,发现仅仅只是有select监听事件,即: form.on('select(filter)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 }); 但是,这个事件需要操作页面,不可取. 三.结果查

模拟select的代码

相关推荐

随机推荐