JS高手帮忙，大家也可讨论下实现。

现在有个这样的需求，四级联动的select。
要这样选州的时候出国家，比如选亚洲 - 出中国、日本、印度、缅甸以此类推选中国出-河北、山西、湖南、广州选省出市
而却要按住shift多选
现有个只支持两级的，大家可以参考下。
不知道数据定义是否合理，效率怎样。
再此基础上加个洲-国家 ^^
组后要得到选中的值 alert出来什么都可以
<html><head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script></head><body>
<select id="selPro" size="5" multiple="multiple">
</select>
<select id="selCity" size="5" multiple="multiple">
</select>
<script type="text/javascript">
    var data = [
{ text: "湖南", value: "001", children: [{ text: "长沙", value: "001_1" }, { text: "衡阳", value: "001_2"}] },
{ text: "湖北", value: "002", children: [{ text: "武汉", value: "002_1" }, { text: "黄岗", value: "002_2"}] },
{ text: "广东", value: "003", children: [{ text: "广州", value: "003_1" }, { text: "深圳", value: "003_2"}] }
    ];    var sProHtml = "";
    for (var i = 0; i < data.length; i++) {
        sProHtml += "<option value='" + data[i].value + "'>" + data[i].text + "</option>";
    }
    $("#selPro").html(sProHtml);
    $("#selPro").change(function() {
        document.getElementById("selCity").options.length = 1;
        var proValues = $("#selPro").val().toString();
        var sCityHtml = "";
        for (var i = 0; i < data.length; i++) {
            if (proValues.indexOf(data[i].value) >= 0) {
                for (var x = 0; x < data[i].children.length; x++) {
                    sCityHtml += "<option value='" + data[i].children[x].value + "'>" + data[i].children[x].text + "</option>";
                }
            }
        }
        $("#selCity").html(sCityHtml);
    });



</script>
</body></html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

通过 parentId ,可以做一个无限级
<!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=utf-8" />
<title>无标题文档</title>
<body>
<select id="z">
    <option>--请选择--</option>
    <option value="yz">亚洲</option>
    <option value="fz">非洲</option>
</select>
<select id="g">
<option>--请选择--</option>
</select>
<select id="c">
<option>--请选择--</option>
</select>
<select id="s">
<option>--请选择--</option>
</select>
<script type="text/javascript">
    var data = {
        'yz':{
'中国':{
'北京':[
'西城',
'东城'
]
},
'日本':{
'东京':[
'111'
]
}
},
'fz':{
'非洲2':{
'非洲1':[
'非洲3'
]
}
}
    };

document.getElementById('z').onchange = function(){
var value = this[this.selectedIndex].value,zarr = data[value],doc = document,
g = doc.getElementById('g'),c = doc.getElementById('c'),s = doc.getElementById('s'),
carr = sarr = null;
_change(zarr,g);

g.onchange = function(){
carr = zarr[this[this.selectedIndex].innerHTML];
_change(carr,c)
};

c.onchange = function(){
sarr = carr[this[this.selectedIndex].innerHTML];
_change(sarr,s)
};
};

function _change(obj,elm){
var option = document.createElement('option');
option.innerHTML = '--请选择--';
elm.innerHTML = '';
elm.appendChild(option);
if(obj.constructor != Array){
for(var name in obj){
var option = document.createElement('option');
option.innerHTML = name;
elm.appendChild(option);
}
}else{
for(var i = 0; i < obj.length; i++){
var option = document.createElement('option');
option.innerHTML = obj[i];
elm.appendChild(option);
}
}
};
</script>
</body>
</html>写了个4级的例子。第一级州这个选择可以考虑直接写在下拉框里面，因为数量不多。也是固定的~·
然后后三级就通过解析json字符串就行了~·
就是最后选中的值都要alert弹出来？
<!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=utf-8" />
<title>无标题文档</title>
<body>
<select id="z">
    <option>--请选择--</option>
    <option value="yz">亚洲</option>
    <option value="fz">非洲</option>
</select>
<select id="g">
    <option>--请选择--</option>
</select>
<select id="c">
    <option>--请选择--</option>
</select>
<select id="s">
    <option>--请选择--</option>
</select>
<script type="text/javascript">
    var data = {
        'yz':{
            '中国':{
                    '北京':[
                        '西城',
                        '东城'
                    ]
            },
            '日本':{
                    '东京':[
                        '111'
                    ]
            }
        },
        'fz':{
            '非洲2':{
                '非洲1':[
                    '非洲3'
                ]
            }
        }
    };

    document.getElementById('z').onchange = function(){
        var value = this[this.selectedIndex].value,zarr = data[value],doc = document,
        g = doc.getElementById('g'),c = doc.getElementById('c'),s = doc.getElementById('s'),
        carr = sarr = null;
        _change(zarr,g);

        g.onchange = function(){
            carr = zarr[this[this.selectedIndex].innerHTML];
            _change(carr,c)
        };

        c.onchange = function(){
            sarr = carr[this[this.selectedIndex].innerHTML];
            _change(sarr,s)
        };
s.onchange = function(){
var z = doc.getElementById('z')
var str = z.options[z.selectedIndex].innerHTML + ' '
  + g.options[g.selectedIndex].innerHTML + ' '
  + c.options[c.selectedIndex].innerHTML + ' '
  + this[this.selectedIndex].innerHTML;
alert(str);
};
    };

    function _change(obj,elm){
        var option = document.createElement('option');
        option.innerHTML = '--请选择--';
        elm.innerHTML = '';
        elm.appendChild(option);
        if(obj.constructor != Array){
            for(var name in obj){
                var option = document.createElement('option');
                option.innerHTML = name;
                elm.appendChild(option);
            }
        }else{
            for(var i = 0; i < obj.length; i++){
                var option = document.createElement('option');
                option.innerHTML = obj[i];
                elm.appendChild(option);
            }
        }
    };
</script>
</body>
</html>
看看是这意思吗？
<!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=utf-8" />
<title>无标题文档</title>
<body>
<select id="z" multiple="multiple">
    <option value="yz">亚洲</option>
    <option value="fz">非洲</option>
</select>
<select id="g" multiple="multiple">
</select>
<select id="c" multiple="multiple">
</select>
<select id="s" multiple="multiple">
</select>
<script type="text/javascript">
    var data = {
        'yz':{
            '中国':{
                    '北京':[
                        '西城',
                        '东城'
                    ]
            },
            '日本':{
                    '东京':[
                        '111'
                    ]
            }
        },
        'fz':{
            '非洲2':{
                '非洲1':[
                    '非洲3'
                ]
            }
        }
    };

    document.getElementById('z').onchange = function(){
        var value = this[this.selectedIndex].value,zarr = data[value],doc = document,
        g = doc.getElementById('g'),c = doc.getElementById('c'),s = doc.getElementById('s'),
        carr = sarr = null;
        _change(zarr,g,[c,s]);

        g.onchange = function(){
            carr = zarr[this[this.selectedIndex].innerHTML];
            _change(carr,c,[s])
        };

        c.onchange = function(){
            sarr = carr[this[this.selectedIndex].innerHTML];
            _change(sarr,s,[])
        };
    };

    function _change(obj,elm,others){
        /*var option = document.createElement('option');
        option.innerHTML = '--请选择--';*/
for(var i = 0; i < others.length; i++){
others[i].innerHTML = '';
}
        elm.innerHTML = '';
        //elm.appendChild(option);
        if(obj.constructor != Array){
            for(var name in obj){
                var option = document.createElement('option');
                option.innerHTML = name;
                elm.appendChild(option);
            }
        }else{
            for(var i = 0; i < obj.length; i++){
                var option = document.createElement('option');
                option.innerHTML = obj[i];
                elm.appendChild(option);
            }
        }
    };
</script>
</body>
</html>这样？
话说你按住shift多选之后子菜单会怎样
花了点时间写了这个数据是平铺的因为4级的json不好构建相信程序做这几千次循环也瞬间的吧<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var data=[];
void function (){
var id,pId=[];
id=0;
pId[0]=id;
for(var i=1;i<10;i++){
id++;
pId[1]=id;
data.push({id:id,pId:pId[0],text:i});
for(var j=1;j<10;j++){
id++;
pId[2]=id;
data.push({id:id,pId:pId[1],text:i+'-'+j});
for(var k=1;k<10;k++){
id++;
pId[3]=id;
data.push({id:id,pId:pId[2],text:i+'-'+j+'-'+k});
for(var h=1;h<10;h++){
id++;
data.push({id:id,pId:pId[3],text:i+'-'+j+'-'+k+'-'+h});
}
}
}
}
}();
</script>
</head>
<body>
<select id="s1" style="width:200px;" multiple size="5"></select>
<select id="s2" style="width:200px;" multiple size="5"></select>
<select id="s3" style="width:200px;" multiple size="5"></select>
<select id="s4" style="width:200px;" multiple size="5"></select>
</body>
<script type="text/javascript">
void function (){
var e=function (s){
var ops=s.options;
for(var i=ops.length-1;i>=0;i--){
s.removeChild(ops[i]);
}
};
var a=function (v,s){
for(var i=0,l=data.length;i<l;i++){
if(data[i].pId!=v){
continue;
}
var ops=document.createElement('option');
ops.value=data[i].id;
ops.innerHTML=data[i].text;
s.appendChild(ops);
}
};
var s1=document.getElementById('s1');
var s2=document.getElementById('s2');
var s3=document.getElementById('s3');
var s4=document.getElementById('s4');
s1.onchange=function (){
e(s2);
e(s3);
e(s4);
var ops=s1.options;
var val;
for(var i=0,il=ops.length;i<il;i++){
if(!ops[i].selected){
continue;
}
val=ops[i].value;
a(val,s2);
}
};
s2.onchange=function (){
e(s3);
e(s4);
var ops=s2.options;
var val;
for(var i=0,il=ops.length;i<il;i++){
if(!ops[i].selected){
continue;
}
val=ops[i].value;
a(val,s3);
}
};
s3.onchange=function (){
e(s4);
var ops=s3.options;
var val;
for(var i=0,il=ops.length;i<il;i++){
if(!ops[i].selected){
continue;
}
val=ops[i].value;
a(val,s4);
}
};
s4.onchange=function (){
var val='';
val+='s1  '+v(s1)+'\n';
val+='s2  '+v(s2)+'\n';
val+='s3  '+v(s3)+'\n';
val+='s4  '+v(s4)+'\n';
alert(val);
};
var v=function (s){
var ops=s.options;
var val='';
for(var i=0,il=ops.length;i<il;i++){
if(!ops[i].selected){
continue;
}
val+=ops[i].value+',';
}
return val;
};
a(0,s1);
}();
</script>
</html>