javascript 多个select的情况,已经选中的option不能在其他的select中出现怎么解决?

Vencenty
  • 14

代码写得差不多了,有点问题,贴出来大佬帮我看一下行吗,这个第一个选项消除不掉,我想不到是哪里的问题....

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<select name="" id="1"></select>
<br>
<br>
<select name="" id=""></select>
<br>
<br>
<select name="" id=""></select>
<br>
<select name="" id=""></select>
<br>
<select name="" id=""></select>


<script>

    var
        selectLength,
        selects,
        selectIndexArr,
        selectOptionArr,
        c = console.log;

    var data = [
        "我父亲的姓名",
        "我母亲的姓名?",
        "我的出生地?",
        "我高中校名?",
        "我的大学校名?",
        "我大学毕业年份?",
        "我老婆/老公的名字??",
        "结婚纪念日?",
        "我的生日?"
    ];

    window.onload = function () {
        initSelect();

    };

    function initSelect () {
        selects = document.getElementsByTagName('select');
        selectLength = selects.length;

        // 设置数组长度
        selectIndexArr = new Array(selectLength);
        selectOptionArr = new Array(selectLength);

        // 初始化下拉框
        for (var i = 0; i < selectLength; i ++ ) {
            for (var j = 0; j < data.length; j ++) {
                var option = document.createElement('option');
                option.innerText = data[j];
                selects[i].appendChild(option);
            }

            selects[i].index = i;
            selects[i].onchange = function () {
                // 存储选中的索引和选项
                selectIndexArr[this.index] = this.selectedIndex;
                // 重新载入option
                reloadOption();
                // 隐藏掉已经选中的option
                hideOption();
            }
        }
    }
    
    // function storeSelectedIndex (object, objectIndex) {
    //     var optionValue = object.value;
    //     var selectedIndex = object.selectedIndex;
    //     // selectOptionArr[objectIndex] = optionValue;
    //     selectIndexArr[objectIndex] = selectedIndex;
    // }

    function reloadOption () {
        for (var i = 0; i < selectLength; i ++) {
            for (var j = 0; j < data.length; j ++) {
                selects[i].options[j].style.display = 'block';
            }
            selectIndexArr.forEach(function (value,index) {
                if (i === index) {
                    selects[i].options[value].selected = true;
                }
            });
        }
    }

    function hideOption () {
        selectIndexArr.forEach(function (v) {
            for (var i = 0; i < selectLength; i ++) {
                if (v)  selects[i].options[v].style.display = 'none';
            }
        });
    }


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

这个代码复制下来直接运行就行,只是第一个选项总是存在,比较尴尬,调了半天,自己看晕了,求大神帮助,不胜感激~~~

回复
阅读 2.2k
1 个回答
✓ 已被采纳

hideOption 中,你 if (v)0 判断出 bug 了哦。

全局变量多了容易乱,简化了一下,供参考

<script>
    window.onload = function initSelect () {
        const data = [
            "我父亲的姓名",
            "我母亲的姓名?",
            "我的出生地?",
            "我高中校名?",
            "我的大学校名?",
            "我大学毕业年份?",
            "我老婆/老公的名字??",
            "结婚纪念日?",
            "我的生日?",
        ]
    
        const $selects = document.querySelectorAll('select')

        $selects.forEach($select => {
            createOption($select, '-=请选择=-')
            data.forEach(question => createOption($select, question))
            $select.onchange = resetOptions
        })

        function resetOptions () {
            const isSelected = []
            $selects.forEach($select => isSelected[$select.selectedIndex] = true)

            $selects.forEach($select => {
                for (let i = 1; i <= data.length; i++) {
                    $select.options[i].style.display = isSelected[i] ? 'none' : 'block'
                }
            })
        }

        function createOption ($select, text) {
            const $option = document.createElement('option')
            $option.value = text
            $option.text = text
            $select.add($option)
        }
    }
</script>
宣传栏