动态移除下拉框的选项

<!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>
<script type="text/javascript">
var t=[];
function removes(srcdom,id){
var i=srcdom[srcdom.selectedIndex].innerHTML;
if(i!='请选择'){
t.push(i);
var se=document.getElementById(id);
for(var j=0;j<se.length;j++){
if(id=="test3"){
alert("a");
for(var k=0;k<t.length;k++){
if(se[j].innerHTML==t[k]){
se.removeChild(se[j]);
}
}
}else{
if(se[j].innerHTML==i){
se.removeChild(se[j]);
}
}
}
}
}
</script>
</head><body>
<select id="test1" onchange="removes(this,'test2')">
<option>请选择</option>
<option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<select id="test2" onchange="removes(this,'test3')">
<option>请选择</option>
<option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<select id="test3">
<option>请选择</option>
<option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
</body>
</html>
这样？？

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>123</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#divContainer select").change(function () {
                recursionRemove(this.id, this.value)
            });            function recursionRemove(selectId, value) {
                var $subSelect = $("select[parentId='" + selectId + "']");
                if ($subSelect.length == 0) {
                    return;
                }
                $subSelect.find("option[value='" + value + "']").remove();
                recursionRemove($subSelect.attr("id"), value);
            }
        });
    </script>
</head>
<body>
<div id="divContainer" >
    <select id="select_1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select id="select_2" parentId="select_1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select id="select_3" parentId="select_2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</div>
</body>
</html>

<div id="list">生成下拉菜单地方</div>
<script type="text/javascript">
    var arr=[1,2,3,4,5];//下拉菜单值
    var txt=["菜单1","菜单2","菜单3","菜单4","菜单5"];//下拉菜单文本
    var num=2;//生成几级下拉菜单(从0算起,但不可超出数组下标)
    var i_all=num>arr.length-1?arr.length-1:num;//判断是否超出数组下标
    var str="";
    for(var i=0;i<=i_all;i++){
        if(i<i_all){
            str+='<select name="cat'+i+'" onchange="option('+i+')" id="cat'+i+'">';
        }else{
            str+='<select name="cat'+i+'" id="cat'+i+'">';
        }
        if(i==0){
            for(var n=0;n<arr.length;n++){
                str+='<option value="'+arr[n]+'">'+txt[n]+'</option>';
            }
        }
        str+='</select>';
    }
    document.getElementById("list").innerHTML=str;
    function option(i){
        if(i>=i_all)return;
        var obj=document.getElementById("cat"+i);
        var opt=obj.options;
        var thi=document.getElementById("cat"+(i+1));
        thi.innerHTML="";
        for(var n=0;n<opt.length;n++){
            if(n!=obj.selectedIndex){
                str = new Option(opt[n].text,opt[n].value);
                thi.options.add(str);
            }
        }
        if(i+1<i_all)option(i+1);
    }
    option(0);
</script>

别急，　这个代码就是百分百完美的了，　保证你好用！！<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>123</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //--------  注：本代码功能易于扩展，无论再增加任意多的select,只要设置父id (parentId) 即可 --------
        //页面加载完毕
        $(function () {
            //将div容器内的所有 select 设置 change 事件
            $("#divContainer select").change(function () {
                //设置下一级的变化情况
                recursionSetSubSelect(this.id)
            }).each(function () {
                //将每一个select 的原有html保存
                $(this).data("selfHtml", $(this).html());
            });
            //递归设置子一级select
            function recursionSetSubSelect(selectId) {
                //找到下一级的select (B)
                var $subSelect = $("select[parentId='" + selectId + "']");
                //如果无下一级，不作任何操作
                if ($subSelect.length == 0) {
                    return;
                }
                //找到 B 对应所有父级选中项，放在数组
                var valArr = [];
                findAllParentValues($subSelect.attr("parentId"), valArr);
                //清空 B 的所有option
                $subSelect.empty();
                //在原数据(html)中遍历每一个option, 并与数组对比。
                var $selfHtml = $($subSelect.data("selfHtml"));
                $selfHtml.filter("option").each(function () {
                    //如果父级没有用过的（不在数组中），则添加到 B
                    var isUsed = $.inArray($(this).val(), valArr) != -1;
                    if (!isUsed) {
                        $subSelect.append($(this));
                    }
                });
                //递归设置下一级的select
                recursionSetSubSelect($subSelect.attr("id"));
            }
            //递归查找select所有父级选中项的数组
            function findAllParentValues(selectId, valArr) {
                //找到父级对象 A
                var $parentSelect = $("#" + selectId);
                //如无父级，不作任何操作, 返回数组即可
                if ($parentSelect.length == 0) {
                    return valArr;
                }
                //将A的选中项放在数组中
                valArr.push($parentSelect.val());
                return findAllParentValues($parentSelect.attr("parentId"), valArr);
            }
        });
    </script>
</head>
<body>
<div id="divContainer" >
    <select id="select_1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select id="select_2" parentId="select_1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select id="select_3" parentId="select_2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</div>
</body>
</html>

<div id="container">
<select></select>
<select></select>
<select></select>
</div>
<script type="text/javascript">
    var map = {1:1,2:2,3:3,4:4,5:5};
    var selectList = document.getElementById("container").getElementsByTagName("select");
    var select,option;
    for(var i=0;i<selectList.length;i++){
         select = selectList[i];
option = createOption("0","--全部--");
select.appendChild(option);
         for(var j in map){
     option = createOption(j,map[j]);
     select.appendChild(option);
}
//最后一个select不需要change的联动效果
if(i<selectList.length - 1){
     select.onchange = change;
}
    }
    function createOption(value,text){
var opt = document.createElement("option");
opt.value = value;
opt.text = text;
return opt;
    }
    function change(){
var m={},i=0,selectedValues=[],tmp={},value;
for(;i<selectList.length;i++){
    select = selectList[i];
    m[select.value] = select.value;
    if(select == this){
break;
    }
}
for(var v in map){
    if(m[v] === undefined){
tmp[v] = map[v];
    }
}
for(var j=i+1;j<selectList.length;j++){
    select = selectList[j];
    value = select.value;
    select.options.length = 1;
    for(var v in tmp){
option = createOption(v,tmp[v]);
select.appendChild(option);
    }
    if(tmp[value]){
        select.value = value;
    }
    if(map[value] !== undefined){
     tmp[value] = map[value];
    }
}

    }
</script>

调试易

动态移除下拉框的选项

解决方案 »