如何用JS使<option>根据判断来显示？

我认为做二级联动比较方便的办法
<!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">
select{width:150px;}
</style>
</head>
<body>
<select id="sel1"><option>请选择...</option></select>
<select id="sel2"></select>
<script type="text/javascript">
var data={
'浙江省':['浙江城市一','浙江城市二','浙江城市三','浙江城市四','浙江城市五'],//如果需要城市代码的，可以这样写{city:'杭州',code:'0571'}
'江西省':['江西城市一','江西城市二','江西城市三','江西城市四','江西城市五']
};
function $(id)
{
return document.getElementById(id);
}
window.onload = function(){
var s1 = $("sel1");
var s2 = $("sel2");
for(var province in data)
{
var opt = new Option(province,'');
s1.options.add(opt);
}

s1.onchange = function(){
clearCombo(s2);
var txt = this.options[this.selectedIndex].text;
if(data[txt])
{
var city = data[txt];
for(var i=0;i<city.length;i++)
{
var opt = new Option(city[i],'');
s2.options.add(opt);
}
}
}
}function clearCombo(cb)
{
while(cb.options.length>0)
cb.options.remove(0);
}
</script>
</body>
</html>

解决方案 »

  1.   

    改一下，上面的不兼容了……
    <!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">
    select{width:150px;}
    </style>
    </head>
    <body>
    <select id="sel1"><option>请选择...</option></select>
    <select id="sel2"></select>
    <script type="text/javascript">
    var data={
    '浙江省':['浙江城市一','浙江城市二','浙江城市三','浙江城市四','浙江城市五'],
    '江西省':['江西城市一','江西城市二','江西城市三','江西城市四','江西城市五']
    };
    function $(id)
    {
    return document.getElementById(id);
    }
    window.onload = function(){
    var s1 = $("sel1");
    var s2 = $("sel2");
    for(var province in data)
    {
    var opt = new Option(province,'');
    s1.options.add(opt);
    }

    s1.onchange = function(){
    clearCombo(s2);
    var txt = this.options[this.selectedIndex].text;
    if(data[txt])
    {
    s2.style.display="";
    var city = data[txt];
    for(var i=0;i<city.length;i++)
    {
    var opt = new Option(city[i],'');
    s2.options.add(opt);
    }
    }
    else
    {
    s2.style.display="none";//如果一级菜单没有二级就隐藏
    }
    }
    }function clearCombo(cb)
    {
    while(cb.options.length>0)
    cb.remove(0);//修改一下，上面的不兼容FF了
    }
    </script>
    </body>
    </html>
      

  2.   

    我参照你的写，为什么data那里会报错？说缺少符号？
    zsdata的值就是这样   '建造师':['一级临时建造师','二级注册建造师'],'专业职称证书':['技术员']var zsdata=document.getElementById('zgzsdata').value;
    var data={zsdata};
      

  3.   

    要用{}括起来
    var data={
        '浙江省':['浙江城市一','浙江城市二','浙江城市三','浙江城市四','浙江城市五'],
        '江西省':['江西城市一','江西城市二','江西城市三','江西城市四','江西城市五']//最后这里没,
    };
      

  4.   

    哦，没看仔细/*
    不能这么写，那个不是字符串
    var zsdata=document.getElementById('zgzsdata').value;
    var data={zsdata};*///试试这样
    var zsdata=document.getElementById('zgzsdata').value;
    var data= (new Function( 'return {'+zsdata+'}' ))();
      

  5.   

    var zsdata=document.getElementById('zgzsdata').value;
    var data= (new Function( 'return {'+zsdata+'}' ))();