jquery css模拟表单下拉框select美化点击滑动展开下拉框菜单
jquery + css 模拟表单下拉
下载资源：1292次
下载积分：20分
本站评论功能暂时取消，后续此功能例行通知。
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
下载该资源用户也下载了
未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口& & & & 点击按钮后，文本框变为Select下拉列表框& & [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]& & 您可能感兴趣的文章:js Select下拉列表框进行多选、移除、交换内容的具体实现方法利用jquery操作select下拉列表框的代码php 获取select下拉列表框的值javascript. 操作select下拉列表框的一点小经验javascript对下拉列表框(select)的操作实例讲解& & QQ空间
百度搜藏更多& & Tags：文本框 Select& & 复制链接收藏本文打印本文关闭本文返回首页& & 上一篇：JavaScript. 自动在表格前面增加序号& & 下一篇：JS焦点图切换，上下翻转& & 相关文章CSS 美化表格边框为凹陷立体效果的实现方法背景音乐每次刷新都可以自动更换通过脚本控制指定内容不能被选择用javascript实现“闪动”标题栏CSS 网页顶部固定工具栏拖动无闪烁实现代码功能很全的精品JS计算器大平洋汽车网左侧菜单连接文字不停变色兼容FF&IE的滚动代码飞鱼(shqlsl) javascript作品集& & 文章评论& & 最 近 更 新& & JS焦点图切换，上下翻转加入收藏夹代码（兼容 gecko）全选并改变TR颜色的javascript实现代码JavaScript. 自动在表格前面增加序号任意位置显示html菜单javascript四个方向无间隙滚动合集(多浏览大平洋汽车网左侧菜单用javascript实现“闪动”标题栏一种表格背景色渐变效果的实现js实现的网站首页随机公告随机公告& & 热 点 排 行& & 跑马灯效果大全window.open()弹出居中的窗口javascript四个方向无间隙滚动合JS焦点图切换，上下翻转用javascript实现页面打印的三种添加到收藏夹代码（兼容几乎所有禁止刷新，回退的JSfirefox(火狐)和ie浏览器禁止右键JavaScript实现禁止后退的方法一个简单的收缩菜单效果
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
上一篇：下一篇：
相关经验教程
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益收藏，5.9k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我想要的效果是点击下拉菜单&select&的时候，不要展开下拉菜单。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你没有说清楚实现这个场景的目的，让人难以理解需求。
如果单纯不让用户点击，方法有很多，你可以给他覆盖一层透明的， 也可以给他绑定点击事件，在事件中拦截默认动作，还可以用图片去代替这个下拉框，骗用户却不让他点。
不管怎样，下拉框在那里却不能点挺让人不舒服的。
select有个disable属性，也完全能够做到让你看，不让你点。
另外在你问题的第一个评论中：
Humphry · 5天前
要说HTML4有什么原生表单组件最为难用，select首当其冲。
个人推荐模拟的：http://aui.github.io/popupjs/doc/selectbox.html
他说的内容其实是我更推荐的，这个模拟select库我问过作者，目前腾讯Qzone在产品环境中用这个库，我觉得值得信赖。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
猜测是编辑文章（估且这么认为）时不希望让用户修改分类吧。
因为 select 没有 readonly 状态，所以你可以在判断为编辑文章时，在页面中放一个 input type=hidden，然后用文本显示出当前值。
如果一定要添加一个 select 的话，可以这样。
&select name="category" disabled&
&option&1&/option&
&option&2&/option&
&input type="hidden" name="category" /&
你也可以使用 ，它能够模拟出下拉框的 readonly 状态。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
select.on('click',function(e){e.preventdefault()});
给个class="disabled".disabled {pointer-events:}
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
设置一个width和height都和这个下拉框相同的透明div，覆盖在上面，为了显示出该select组件不能用，可将其opacity设置为0.6，IE下记得设置filter alpha
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知您的位置： >
jQuery如何操作下拉框select
学习标签：
本文导读：html中的下拉框select是我们经常使用的html标签，下拉框常用操作有：1.获取列表项中候选项的数目；2.获得选中项的索引值；3.获得当前选中项的值；4.设定选择值；5.设定选择项。下面介绍jQuery中操作下拉框select的方法
一、Jquery中select操作的定义
JScript 代码 &&复制
//得到select项的个数
jQuery.fn.size = function()...{
return jQuery(this).get(<span style="color: #).options.
//获得选中项的索引
jQuery.fn.getSelectedIndex = function()...{
return jQuery(this).get(<span style="color: #).selectedI
//获得当前选中项的文本
jQuery.fn.getSelectedText = function()...{
if(this.size() == <span style="color: #) return &下拉框中无选项&;
var index = this.getSelectedIndex();
return jQuery(this).get(<span style="color: #).options[index].
//获得当前选中项的值
jQuery.fn.getSelectedValue = function()...{
if(this.size() == <span style="color: #)
return &下拉框中无选中值&;
return jQuery(this).val();
//设置select中值为value的项为选中
jQuery.fn.setSelectedValue = function(value)...{
jQuery(this).get(<span style="color: #).value =
//设置select中文本为text的第一项被选中
jQuery.fn.setSelectedText = function(text)
var isExist = false;
var count = this.size();
for(var i=<span style="color: #;i&i++)
if(jQuery(this).get(<span style="color: #).options[i].text == text)
jQuery(this).get(<span style="color: #).options[i].selected = true;
isExist = true;
if(!isExist)
alert(&下拉框中不存在该项&);
//设置选中指定索引项
jQuery.fn.setSelectedIndex = function(index)
var count = this.size();
if(index &= count || index & <span style="color: #)
alert(&选中项索引超出范围&);
jQuery(this).get(<span style="color: #).selectedIndex =
//判断select项中是否存在值为value的项
jQuery.fn.isExistItem = function(value)
var isExist = false;
var count = this.size();
for(var i=<span style="color: #;i&i++)
if(jQuery(this).get(<span style="color: #).options[i].value == value)
isExist = true;
return isE
//向select中添加一项，显示内容为text，值为value,如果该项值已存在，则提示
jQuery.fn.addOption = function(text,value)
if(this.isExistItem(value))
alert(&待添加项的值已存在&);
jQuery(this).get(<span style="color: #).options.add(new Option(text,value));
//删除select中值为value的项，如果该项不存在，则提示
jQuery.fn.removeItem = function(value)
if(this.isExistItem(value))
var count = this.size();
for(var i=<span style="color: #;i&i++)
if(jQuery(this).get(<span style="color: #).options[i].value == value)
jQuery(this).get(<span style="color: #).remove(i);
alert(&待删除的项不存在!&);
//删除select中指定索引的项
jQuery.fn.removeIndex = function(index)
var count = this.size();
if(index &= count || index & <span style="color: #)
alert(&待删除项索引超出范围&);
jQuery(this).get(<span style="color: #).remove(index);
//删除select中选定的项
jQuery.fn.removeSelected = function()
var index = this.getSelectedIndex();
this.removeIndex(index);
//清除select中的所有项
jQuery.fn.clearAll = function()
jQuery(this).get(<span style="color: #).options.length = <span style="color: #;
二、Jquery中select操作的实例
1、jquery获取当前选中select的text值
var checkText=$(&#slc1&).find(&option:selected&).text();
2、jquery获取当前选中select的value值
var checkValue=$(&#slc1&).val();
3、jquery获取当前选中select的索引值
var index=$(&#slc1 &).get(0).selectedI
4、jquery获取指定select的最大索引值
var maxIndex=$(&#slc1 option:last&).attr(&index&);
5、jquery设置索引值为1的项为当前选中项
$(&#slc1 &).get(0).selectedIndex=1;
6、jquery设置value值2的项为当前选中项
$(&#slc1 &).val(2);
7、jquery设置text值为&青藤园&的项为当前选中项
$(&#slc1 option[text=&#39;青园w&#39;]&).attr(&selected&, true);
8、为指定select下拉框追加一个option（追加到在末尾）
$(&#slc2&).append(&&+i+&&);
9、为制定select下拉框插入一个option（插入到第一个位置）
$(&#slc2&).prepend(&请选择&);
10、jquery删除select下拉框的最后一个option
$(&#slc2 option:last&).remove();
11、jquery删除select下拉框索引值为0的option
$(&#slc2 option[index=&#39;0&#39;]&).remove();
12、jquery删除select下拉框value为2的option
$(&#slc2 option[value=&#39;2&#39;]&).remove();
13、jquery删除select下拉框text为&青藤园&的option
$(&#slc2 option[text=&#39;ewew2&#39;]&).remove();
您可能感兴趣
一月好评排行榜【JQuery】Select下拉框美化，实现鼠标悬浮显示下拉
·简介&&&&select下拉框在前端的html页面编写中是一个使用颇多的标签，但是其略丑的风格却是让咂舌，虽然chome等浏览器在其发布的新版本中已经将select下拉框优化的很漂亮，但是对与大多浏览器来说依然是老样子，本示例中使用JQuery+UL，LI实现美化版的自定义select,其实也就是模拟一个select下拉框.·效果展示&&&&·原理&&&&对于一个select来说总体上分为两部分，如图所示绿色部分是用来显示当前的选项，粉红色的部分是用于显示下拉项的，当我们选中一个下拉项的时候，顶部的当前选项就会改变.&&&&根据这个原理，我们使用一个DIV和一个UL列表模拟出这种效果，如上面的图那样，绿色部分用一个DIV，粉红色部分用一个UL列表，初始的时候UL隐藏不显示，当我们鼠标移动到绿色的DIV上的时候UL属性设置为显示，当我们点击UL的Li子项的时候使用JS获取到Li的内容并显示到绿色的DIV内，这样我们就能模拟出一个自定义的美化版本的Select了;下面是主要的html代码:&div&id=&select-con&&
&&&&&&input&type=&hidden&&name=&st&&id=&st&&value=&app&&/&
&&&&&&div&id=&select-bg&&&/div&
&&&&&&span&id=&select-selected&&用于显示当前的选项&/span&
&&&&&&ul&id=&select-list&&
&&&&&&&&&&&li&listfor=&app&&selected=&selected&&应用&/li&
&&&&&&&&&&&li&listfor=&blog&&&博文&/li&
&&&&&&&&&&&li&listfor=&codeorg&&代码&/li&
&&&&&&&/ul&
&/div&解读:1、id=&select-con&的DIV是整个select的容器2、第二行的隐藏的 input 是我们要模拟的表单项3、id=&select-selected&的span适用于显示当前的选中项4、UL就是我们的下拉列表5、li中的listfor项是我们自定义的域，用于保存当前项的value，用于对input隐藏域赋值。6、UL的默认选项我们用 selected=&selected& 来标记&下面是小悠写的一个html例子，里面有注释:&解压密码 yscode下载地址:本文出自悠然品鉴原创,转载请注明出处:
友情链接>>
悠然品鉴是由小悠创作的个人资源共享网站(非商业性质),遵守协议，版权所有，允许学习性研究！
Copyright (C) 2009 - 2014 .All Rights Reserved |
| 联系方式：(#改为@)
网站已经改版为Wordpress版本,这里是旧版本的快照,请不要在页面中留言.}