当前位置: 首页 > Web前端 > HTML

完美解决了html中select的选项无法隐藏的问题

时间:2023-04-02 15:35:57 HTML

我在开发过程中无意中遇到了这个问题,第一时间解决问题的是百度。结果如下:1、首先,设置display:none选项的解决方案肯定不行;2、网友提出的两种解决方案:在option标签上添加disabled="disabled"属性表示不可用,该方案只是让option不可选,并没有隐藏b.如果想隐藏,只能把option从DOM树中移除,然后把移除的option缓存起来,等要显示的时候再把option从缓存中移除再加入到DOM树中肯定是不符合要求。C。最终解决方案(经测试兼容所有浏览器):在option中添加parent标签,并设置parent标签隐藏【这里使用span标签】,如果要显示,去掉parent标签即可。但是,以上方法都没有用。最终解决方案://通过clone方法保存selectvarselect=$("#select").clone();//删除所有option$("#select").find('option').remove();//找出需要显示的option并复制varoptions=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);这很好用。