IE浏览器不支持display:none导致option不能隐藏的问题

项目场景：级联的select元素，根据一级select的选择，二级select中的option选项需要对应的隐藏或显示。

原来的做法是display:none和display:block来隐藏和显示option，option中通过自定义属性data-category过滤，控制option的隐藏或显示，结果在IE浏览器中并不能达到想要的效果，通过网络查找，是因为IE浏览器不支持display:none属性。

解决方案：

1、给option外加一个父级标签，并设置父级标间隐藏[此处用的是span标签]，如果要显示的话则去除父级标签即可(网络上查找的方法)

2、在一级select的onchange事件触发的方法中按选择的option的值判断，通过$(selector).html("option的html代码")方法直接覆盖二级select的option内容

具体参考如下：

//html代码 


//方案一
<script type="text/javascript>
    //隐藏全部选项
    function hideAllOption(selId){
		$("#"+selId).find("option").each(function(index,element){
			var elementJQ = $(element);//将元素包装成jquery元素，否则不支持parent()方法
			var eleParent = elementJQ.parent("span");
			if(!eleParent.size()){
				elementJQ.wrap("");
			}
		});
	}
	//显示指定条件的选项,兼容ie，condition 为过滤option的条件的字符串:如 "option[data-category='sport']"
	function showOptionCondition(selId,condition){
	    //查找方法需要用find向下遍历单多层级，children只向下遍历单一层级
		$("#"+selId).find(condition).each(function(index,element){ 		
		    var elementJQ = $(element);
			var eleParent = elementJQ.parent("span");
			if(eleParent.size()){
				eleParent.children().clone().replaceAll(eleParent);
			}
		});
	}
	
	
	function changeSelect1(){
	    var category = $("#select1").attr("data-category");
	    hideAllOption("select2");//全部隐藏
	    showOptionCondition("select2","option[data-category='"+category+"sport']");//按条件显示 
	}

</script>

//方案二 
<script type="text/javascript">
    function changeSelect1(){
	    var category = $("#select1").attr("data-category");
	    if("sports"==category){
	        $("#select2").html("篮球"+
                               "足球"+
                               "排球");
	    } else if("reading"==category){
	        $("#select2").html("诗词"+
                               "小说");
	    } else if("music"==category){
	        $("#select2").html("古典"+
                                "流行");
	    }
	}

</script>

来源：CSDN

作者：韦观松

链接：https://blog.csdn.net/weigs81082580/article/details/70904044

标签

select

display

ie浏览器

option