<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#carstyle option{
display:none;
}
#carstyle .selected{
display:block;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
$("select").change(function(){
//$(this).each(function(){
var selectbrand = $(this).attr("value");
var $selectstyle = $("#carstyle option[value='"+selectbrand+"']");
var $noselectstyle = $("#carstyle option[value !='"+selectbrand+"']");
//alert($selectstyle);
//alert(noselectstyle);
$noselectstyle.hide();
$("#carstyle.selected").show();
$selectstyle.show();
//});
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
汽车品牌
<select id="carbrand">
<option value="" selected="selected">--请选择--</option>
<option value="lbjn">兰博基尼</option>
<option value="bwm">宝马</option>
<option value="bc">奔驰</option>
<option value="ad">奥迪</option>
</select>
汽车型号
<select id="carstyle">
<option class="selected" value="" selected="selected">--请选择--</option>
<option value="lbjn">lb1</option>
<option value="lbjn">lb2</option>
<option value="lbjn">lb3</option>
<option value="bwm">b11</option>
以上选择某一品牌的车子 ,另外个相对应的列表只出现所选择的品牌的响应型号 。hide()  show() 兼容性问题吗?我这个程序在firefox可以用 但在ie不行(我用的ie8)

解决方案 »

  1.   

    不是jquery不支持ie
    而是ie不支持option的display属性jquery的hide其实就是设置项目的css的display为none因为ie不支持,所以就显示不出效果了。
      

  2.   

    楼主可以考虑用append动态插入追加option$("#select").append("<option value='"+xxx+"'>"+1+"</option>");
      

  3.   

    可以考虑用append动态追加option
    $("#select").append("<option value='"+xxx+"'>"+1+"</option>");
      

  4.   

    lz可以考虑下,把级联列表形成一个xml文件,在jsp页面加载这个xml。DHTMLX里面有一个attachChildCombo