资讯专栏INFORMATION COLUMN

完美解决html中select的option不能隐藏的问题。

dayday_up / 2584人阅读

摘要:开发过程中无意遇到这个问题解决问题第一时间就是百度。终极方案经测试兼容各浏览器给外加一个父级标签,并设置父级标签隐藏此处用的是标签,如果要显示的话则去除父级标签即可。

开发过程中无意遇到这个问题,解决问题第一时间就是百度。结果得到如下方法:

1、首先设置option的display:none的方案肯定是不可行了;
2、某网友提出的两种方案:
a.在option标签上面加上disabled="disabled"属性,表示不可用,这种方案只是让option不能选择,但没有隐藏掉
b.如果想隐藏掉,只能把option从DOM树中去除,然后对去除的option进行缓存,在要显示的时候再将option从缓存中取出加入DOM树中
肯定也是不符合需求的。
c、终极方案(经测试兼容各浏览器):给option外加一个父级标签,并设置父级标签隐藏[此处用的是span标签],如果要显示的话则去除父级标签即可。

然而上面这么多种办法并没什么用

最后解决办法:

//将select通过clone方法保存
var select= $("#select").clone();

//删除所有的option
$("#select").find("option").remove();

//查找出需要显示的option并复制
var options = select.find("option[value=1]").clone();

//将需要显示的option添加到select中
$("#select").append(options);

//因为option.remove()不会刷新控件,需要将新的option切换上去
//这里排除了options.size() == 0的情况
$("#select").find("option").eq(0).attr("selected",true);

这样就好了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50268.html

相关文章

  • 【译】怎样创建定制表单组件

    摘要:若你想在诸如元素的组件上应用高级样式或者想定制组件的行为,你就只能选择创建自己的表单组件。我们将通过本文学习如何构建一个表单组件。 系列文章说明 原文 在许多情况下,[可用的HTML表单组件]()是不够的。若你想在诸如元素的组件上[应用高级样式]()、或者想定制组件的行为,你就只能选择创建自己的表单组件。 我们将通过本文学习如何构建一个表单组件。为达到目的,我们选择重构元素作为例子...

    AnthonyHan 评论0 收藏0
  • 【译】怎样创建定制表单组件

    摘要:若你想在诸如元素的组件上应用高级样式或者想定制组件的行为,你就只能选择创建自己的表单组件。我们将通过本文学习如何构建一个表单组件。 系列文章说明 原文 在许多情况下,[可用的HTML表单组件]()是不够的。若你想在诸如元素的组件上[应用高级样式]()、或者想定制组件的行为,你就只能选择创建自己的表单组件。 我们将通过本文学习如何构建一个表单组件。为达到目的,我们选择重构元素作为例子...

    William_Sang 评论0 收藏0
  • 【译】怎样创建定制表单组件

    摘要:若你想在诸如元素的组件上应用高级样式或者想定制组件的行为,你就只能选择创建自己的表单组件。我们将通过本文学习如何构建一个表单组件。 系列文章说明 原文 在许多情况下,[可用的HTML表单组件]()是不够的。若你想在诸如元素的组件上[应用高级样式]()、或者想定制组件的行为,你就只能选择创建自己的表单组件。 我们将通过本文学习如何构建一个表单组件。为达到目的,我们选择重构元素作为例子...

    wanghui 评论0 收藏0
  • 移动端-点透问题 巧妙解决

    摘要:移动端经常出现点透,至于怎么出现的请大家去看一下实现的源码。点透是什么你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件或打开链接。这个被定义为这是一个点透现象。 移动端经常出现点透,至于怎么出现的请大家去看一下zepto实现tap的源码。 1、点透是什么 你可能碰到过在列表页面上创建一个弹出层,弹出层有个关...

    MockingBird 评论0 收藏0
  • 移动端-点透问题 巧妙解决

    摘要:移动端经常出现点透,至于怎么出现的请大家去看一下实现的源码。点透是什么你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件或打开链接。这个被定义为这是一个点透现象。 移动端经常出现点透,至于怎么出现的请大家去看一下zepto实现tap的源码。 1、点透是什么 你可能碰到过在列表页面上创建一个弹出层,弹出层有个关...

    yck 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<