使用 Javascript 删除下一个 select 字段中的选定选项

Question

我使用循环将大约 10 个 select 框添加到表单中。 所有选项都具有相同数量的选项。

 <?php
            for($i=1; $i<11; $i++){
            ?>
            <select name="doc[]"; id="doc<?php echo $i?>"; autocomplete="off"; 
 onchange='disable()'  required>
                <option value="none" disabled selected>Select</option>
                <option value=0>A</option>
                <option value=1>B</option>
                <option value=2>C</option>
                <option value=3>D</option>
                <option value=4>E</option>
                <option value=5>F</option>
                <option value=6>G</option>
                <option value=7>H</option>
                <option value=8>I</option>
                </select>
            <?php
            }
            ?>

我想如果我 select 第一个选项在第一个 select 框中，下一个 select 框不应该有该选项。 在纯 Javascript 中，而不是 Jquery。

我试过写类似的东西：

function disable(){
    for(var i=1; i<9; i++){
        var val = document.getElementById('doc'+i).value;
        document.getElementById("doc"+(i+1)).options[val].disabled = 
        true;
        }
}

但它没有像我预期的那样工作。

Answer 1

好的，这必须在某些步骤中完成。

1. 获取所选选项的值：

    var select = document.getElementById("doc1"); var value = select.value;

2. 当您选择 select 时触发更改事件：

   让 doc = document.querySelector('#doc1');
   doc.addEventListener('change', function() {
   document.getElementById("doc2").options[value] = null; })

3. 您可以根据自己的喜好使用它，使用数组 map 或循环以任何您想要的方式设置 select 盒子的序列。 提一句建议，在尝试更高级的代码之前，您可能应该多尝试一下 javascript，因为我看不到任何迹象表明您根本没有尝试过解决方案。 作为新手没关系，我们都去过一次。 但我真的建议你看看这个并以自己的方式尝试。 它并不完全是重复的，因为它只处理两个下拉菜单，但它是一个开始，会让你对你在做什么有一个基本的了解。 （ 如何从 javascript 的下拉列表中删除选项？ ）

Answer 2

作为新手尝试了这么多小时后，我设法通过修改和重新修改 JS 代码来解决这个问题，最后以以下内容结束：有 10 个 select 菜单，所以我将循环变量总数更改为<11

function disable(){
    
    for(var i=1; i<11; i++){
        var doc = document.getElementById('doc'+i);
         var changesource=event.target.id || event.srcElement.id;
        if(changesource==doc.id){
            var val = doc.selectedIndex;
            
            for(var m=i+1; m<11; m++){
                document.getElementById('doc'+m).options[val].remove();
            }
            
            
        }
        else{
            continue;
        }
       

    }
}