解决办法--浏览器对option的隐藏效果问题

<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
<!--核心代码区域->
function showOptions(seletor){
  $.each($(seletor),function(index,ele){
     if($(this).parent("span").size()>0){ 
      $(this).clone().replaceAll($(this).parent("span"));
    }  
  });  
}
function hideOptions(seletor){
   $.each($(seletor),function(index,ele){
     if($(this).parent("span").size()<=0){  
        $(this).wrap("<span class='hide'></span>");
    } 
  });     
}
<!--核心代码区域->
//传入option的选择器代码  如option的class名为"hide-option";hideOption(".hide-option");



function onchange_select(){
  var pid=$("select[name=parentid]").val();
  if(pid){
       hideOptions("select[name=placeid] option[class]");
       showOptions("select[name=placeid] option.parentid-"+pid);
  }else{
       hideOptions("select[name=placeid] option[class]");
  }
}
</script>
</head>
<body>
<select id="parentid" onchange="onchange_select();" name="parentid">
<option value="">请选择</option>
<option value="1">英语</option>
<option value="2">数学</option>
</select>
<select id="placeid"  name="placeid">
<option value="">请选择</option>
<option class="parentid-1" value="1">英语课本</option>
<option class="parentid-1" value="2">英语练习本</option>
<option class="parentid-1" value="3">英语参考书</option>
<option class="parentid-2" value="4">数学课本</option>
<option class="parentid-2" value="5">数学练习本</option>
<option class="parentid-2" value="6">数学参考书</option>
</select>
</body>
</html>


你可能感兴趣的:(浏览器,option的隐藏效果)