javascript 多個(gè)select的情況,已經(jīng)選中的option不能在其他的select中出現(xiàn)怎么解決?

代碼寫得差不多了,有點(diǎn)問題,貼出來大佬幫我看一下行嗎,這個(gè)第一個(gè)選項(xiàng)消除不掉,我想不到是哪里的問題....

<!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 = [
        "我父親的姓名",
        "我母親的姓名？",
        "我的出生地？",
        "我高中校名？",
        "我的大學(xué)校名？",
        "我大學(xué)畢業(yè)年份？",
        "我老婆/老公的名字？？",
        "結(jié)婚紀(jì)念日？",
        "我的生日？"
    ];

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

    };

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

        // 設(shè)置數(shù)組長(zhǎng)度
        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 () {
                // 存儲(chǔ)選中的索引和選項(xiàng)
                selectIndexArr[this.index] = this.selectedIndex;
                // 重新載入option
                reloadOption();
                // 隱藏掉已經(jīng)選中的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>

這個(gè)代碼復(fù)制下來直接運(yùn)行就行,只是第一個(gè)選項(xiàng)總是存在,比較尷尬,調(diào)了半天，自己看暈了,求大神幫助,不勝感激~~~

回答

編輯回答

青瓷

在 hideOption 中，你 if (v) 對(duì) 0 判斷出 bug 了哦。

全局變量多了容易亂，簡(jiǎn)化了一下，供參考

<script>
    window.onload = function initSelect () {
        const data = [
            "我父親的姓名",
            "我母親的姓名？",
            "我的出生地？",
            "我高中校名？",
            "我的大學(xué)校名？",
            "我大學(xué)畢業(yè)年份？",
            "我老婆/老公的名字？？",
            "結(jié)婚紀(jì)念日？",
            "我的生日？",
        ]
    
        const $selects = document.querySelectorAll('select')

        $selects.forEach($select => {
            createOption($select, '-=請(qǐng)選擇=-')
            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>

2017年8月30日 00:30