Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。
一、题目描述：
在做项目中 有个 区域和街道的联动效果，选择地区后过滤对应的街道。我刚开始时使用的方法是将option设置成 display:none,结果在IE下无效。
解决方法:
一、 用一个变量保存所有街道的值，过滤的时候取出来，动态添加到select中。
二、用jQuery的 $.wrap方法在option外面添加一个父元素 通过父元素控制option的隐藏。
三、每次当区域改变时 向服务器发出请求加载阶段数据。
第二种方法的具体描述：
IE浏览器的select下的option display属性是不生效的。 比如：
<select>
<option value="1">first</option>
<option value="2" style="display:none;">second</option>
<option value="3">third</option>
</select>
<input type="button" value="显示or隐藏" onclick="toggle()">
<script>
function toggle(){
if($("select").find("option[value=2]").css("display")=="none"){
$("select").find("option[value=2]").show();
}else{
$("select").find("option[value=2]").hide();
}
}
</script>
上方HTML 代码在IE 和 chrome(FF等) 浏览器表现是不一样的
IE中select下有3个option都展现出来了，FF和Chrome等则只展现了2个，第二个隐藏状态，点击button 运行function toggle后才会显示出来
下面自己写了个方法处理
function initOption(){
$("select").find("option").each(function(i,obj){
if($(obj).parent(".parentspan").length>0){
$(obj).unwrap();
}
if($(obj).css("display")=='none'){
$(obj).wrap($("<``span class``=``'dimension_parentspan' style``=``'display:none;'``></``span``>"));
}
});
}
运行完toogle之后 在调用initOption方法即可
原理就是先根据option是否有我们后增加的父元素，如果有就先取消掉，
然后根据option的display属性若为none，则外包一个各浏览器都支持display属性的元素，比如span，然后将span设置成隐藏，则option就显示不出来了
