问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Vencenty
    14615
    头像
    清蒸不是水煮
      3.1k21026

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

      <!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>

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

      html5htmljavascript
      阅读 2.8k
      1 个回答
      得票最新
      头像
      CRIMX
        9.1k2720
        ✓ 已被采纳

        在 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>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题