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

dayday_up 发布于2019-08-01 16:03 / 2750人阅读

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

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

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);

这样就好了。

GPU云服务器云服务器不能忽视的问题 select option 解决问题的方法不能建立服务器的问题

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

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

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

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

AnthonyHan 2019-08-21 15:55 评论0 收藏0
【译】怎样创建定制表单组件

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

William_Sang 2019-08-29 12:49 评论0 收藏0
【译】怎样创建定制表单组件

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

wanghui 2019-08-01 17:02 评论0 收藏0
移动端-点透问题巧妙解决

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

MockingBird 2019-08-22 15:33 评论0 收藏0