收藏本页 | 设为主页 | RSS
LOGO

我就上乐乐吧

有些场景下,可能我们需要设定下拉选择框只读,一般有如下两种方案:

您当前的位置:首页 » 技术杂萃
全站公告
重要提示!

本站收集各类美图,以无LOGO原汁原味图为主!欢迎大家交流。
怕失联,请认准如下地址:
微博:http://weibo.com/237h
微信:SuperBeautylove
轻博客:http://www593668com.lofter.com/
花瓣:http://huaban.com/sinsunson
Q群1:231151757
Q群2:583138281
网站:http://www.593668.com
文件解压密码:593668.com
热心赞助

站内搜索
 
相关文章
热门文章
热搜词组
文章归档
友情链接
如何设置下拉框只读

发布日期:2019-09-09  关键词: JavaScript HTML

有些场景下,可能我们需要设定下拉选择框只读,一般有如下两种方案:

1. 针对事件来加以处理:
<select onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
  <option value="0">无</option>
  <option value="1" selected>www.593668.com</option>
</select>
这种方法就是在下拉框获取焦点时,保存当前的选择值,触发下拉并选择之后,仍旧将之前的选择值恢复,选了和跟没有选一样的。就是无视客户的选择,这样虽说是达成的目的,还是客户反应并不友好。

2.利用获取焦点事件来将控件设置成失效
<select onfocus="this.disabled=true;">
  <option value="0">无</option>
  <option value="1" selected>www.593668.com</option>
</select>
这种方式就是进一步改进了,就是用户想要去更改的时候,就设置成控件不可用,虽然是好了点,但也不脱调戏用户的嫌疑。而且当下拉框属性设置为"disabled"时,提交表单时,select的值是无法传递。

必须要在提交时,利用JS移除disabled属性。当然如果使用jQuery的话,也是比较简单,就是提交时处理下相应的表单中的select标签。
$("select").attr("disabled","disabled");

如果使用原生的JS,也比较简单。

document.getElementById("元素控件ID").disabled=false;

3.设置disabled属性
<select disabled="disabled">

这个看起来更直接,下拉框就是灰色,就是有只读的感觉,也根本不可以点击和下拉了。

这个方式可能是大部分人都愿意选择的,但是跟方式2有同样的问题,需要提交表单时利用JS来补救。

三种方式的页面展示效果如下:

如何设置下拉框只读,JavaScript,HTML,技术杂萃

喜欢那种大家自行选择吧。
猜您喜欢:
Q群: 231151757微信:superimagelove 官网:www.593668.com