趣味题：父select中选中的子select不能有_.cxselect多选,子集怎么只有一个-CSDN博客

本文链接：https://blog.csdn.net/yenange/article/details/8688940

坛子里的题，有点意思。问题有点深度，关键是要考虑父select变化后，子select原有的（但不在父select中的）能恢复。留给亲们做题，确实不错！

<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 || this.value=="") {
                        $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="">请选择</option>
        <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="">请选择</option>
        <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="">请选择</option>
        <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>