Javascript 多个相同的<；选择>；每个选项可以选择一次的标记

我正在创建一个网站，其中有4个相同的下拉菜单，每个下拉菜单有10个选项。但这些选项中的每一个都只能在下拉菜单中选择

例如：

当我在此下拉菜单中选择选项1时

<select name="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">2</option>
<option value="4">4</option>
</select>

---

我自己不知道怎么做，所以如果有人能帮助我，我将非常高兴。

为了提供更好的用户体验，当用户在下拉列表中选择某个内容时，应该使用JavaScript禁用这些项目。您是否有可能使用jQuery

---

您还应该在服务器上强制执行它，因为一般来说，客户端是不可信任的。

如果我理解正确，那么最好通过复选框来实现

不要执行以下操作，而要执行以下操作：

<input type="checkbox" name="1" value="1">option1<br>
<input type="checkbox" name="2" value="2">option2 <br> ... 

选项1

选项2
。。。

正如其他人所提到的，在复选框中进行检查是一种更干净的方法。然而，为了提高我的JavaScript技能，我想出了一些可以回答您要求的东西：

var boxes, i, disableOthers;

boxes = document.getElementsByTagName('select');

disableOthers = function () {
    'use strict';
    var i, j, k, selectedValues = [],
        options;

    for (i = 0; i < boxes.length; i += 1) {
        selectedValues.push(boxes[i].value);

        for (j = 0; j < boxes.length; j += 1) {
            if (boxes[j] !== boxes[i]) {
                options = boxes[j].querySelectorAll('option');
                for (k = 0; k < options.length; k += 1) {
                    options[k].disabled = (selectedValues.indexOf(options[k].value) > -1);
                }
            }
        }
    }
};

for (i = 0; i < boxes.length; i += 1) {
    boxes[i].addEventListener('change', disableOthers, false);
}

var框，i，禁用其他；
box=document.getElementsByTagName（'select'）；
disableOthers=函数（）{
"严格使用",；
变量i，j，k，selectedValues=[]，
选择权；
对于（i=0；i-1）；
}
}
}
}
};
对于（i=0；i

---

请参见

下面的代码满足您的要求。我还发了一封信

当来自任何选择输入的选项更改时，它将正确禁用和启用选项

javascript文件

    <script type="text/javascript">

// *** EDIT THIS ***
var selectIds = new Array('select1', 'select2', 'select3', 'select4'); // all of the select input id values to apply the only one option value anywhere rule against

function process_selection(theObj){

    var allSelectedValues = new Array(); // used to store all currently selected values

    // == get all of the currently selected values for all the select inputs
    for (var x=0; x<selectIds.length; x++){
        var v = document.getElementById(selectIds[x]).value; // the value of the selected option for the select input currently being looked at in the loop (selectIds[x])
        // if the selected option value is not an empty string ..
        if(v!==""){
            // store the value of the selected option and it's associated select input id value
            allSelectedValues[v] = selectIds[x];

        }
    }

    // == now work on each option within each select input
    for (var x=0; x<selectIds.length; x++){



        // loop thru all the options of this select input
        var optionObj = document.getElementById(selectIds[x]).getElementsByTagName("option");
        for (var i = 0; i < optionObj.length; i++) {
            var v = optionObj[i].value; // the value of the current option in the iteration
            // only worry about option values that are not an empty string ("")
            if(v!==""){
                if(allSelectedValues[v]){
                    if(allSelectedValues[v] &&  allSelectedValues[v] != selectIds[x]){
                    // disable this option because it is already selected
                    // and this select input is NOT the one that it is selected in
                    optionObj[i].disabled = true;
                    }
                }else{
                    // enable this option because it is not already selected
                    // in any of the other select inputs
                    optionObj[i].disabled = false;
                }
            }
        } // end for (option loop)
    } // end for (select loop)
} // end func
</script>

//***编辑此文件***
var selectIds=新数组（'select1'，'select2'，'select3'，'select4'）；//所有选择输入id值以应用唯一一个选项值anywhere规则
功能过程选择（theObj）{
var allSelectedValues=new Array（）；//用于存储当前选定的所有值
//==获取所有选择输入的所有当前选择值
对于（var x=0；xyou可以重新填充选项标签，而不是在做出选择时使用JavaScript更新您的选择框，或者在处理结果时简单地使用验证。问题到底是什么？我正在尝试创建4个不同的下拉菜单，您可以在其中一次选择每个选项。在第一个下拉菜单中如果选择了向下选项1，则无法在第二个下拉列表中再选择它。我没有使用jQuery或Javascript，因为我对它不是很在行。我正在尝试这样做，但它不起作用。如果尝试使用php，则没有任何东西可以显示，但后来我意识到我必须使用Javascript，因此我删除了旧脚本。我正在尝试创建它因此，您只能选择下拉菜单中的十个选项中的一个，但一旦选择，例如“1”，您不能在第二个下拉菜单中选择它，该菜单具有相同的options@ChristianPeppelman好的，但是在所有的下拉列表都被选中之后，你到底想要什么呢？然后我将结果上传到database@ChristianPeppelman当用户选中这4个复选框时，上传结果并禁用其余复选框比有4个下拉菜单要干净得多，每个下拉菜单都取决于前一个。（使用第4个下拉菜单时，您必须“禁用”三个选项）我已经在使用下拉菜单，但我想做的是：它们有四个下拉菜单，具有相同的选项，第一个是取消第一个首选项，第二个是第二个首选项，依此类推。但是第一个和第二个首选项不能相同，所以当您选择选项“1”在第一个下拉列表中，您不能在第二个选项中选择它。它有一些错误，尤其是当返回并更改以前选择的选项时。
    <script type="text/javascript">

// *** EDIT THIS ***
var selectIds = new Array('select1', 'select2', 'select3', 'select4'); // all of the select input id values to apply the only one option value anywhere rule against

function process_selection(theObj){

    var allSelectedValues = new Array(); // used to store all currently selected values

    // == get all of the currently selected values for all the select inputs
    for (var x=0; x<selectIds.length; x++){
        var v = document.getElementById(selectIds[x]).value; // the value of the selected option for the select input currently being looked at in the loop (selectIds[x])
        // if the selected option value is not an empty string ..
        if(v!==""){
            // store the value of the selected option and it's associated select input id value
            allSelectedValues[v] = selectIds[x];

        }
    }

    // == now work on each option within each select input
    for (var x=0; x<selectIds.length; x++){



        // loop thru all the options of this select input
        var optionObj = document.getElementById(selectIds[x]).getElementsByTagName("option");
        for (var i = 0; i < optionObj.length; i++) {
            var v = optionObj[i].value; // the value of the current option in the iteration
            // only worry about option values that are not an empty string ("")
            if(v!==""){
                if(allSelectedValues[v]){
                    if(allSelectedValues[v] &&  allSelectedValues[v] != selectIds[x]){
                    // disable this option because it is already selected
                    // and this select input is NOT the one that it is selected in
                    optionObj[i].disabled = true;
                    }
                }else{
                    // enable this option because it is not already selected
                    // in any of the other select inputs
                    optionObj[i].disabled = false;
                }
            }
        } // end for (option loop)
    } // end for (select loop)
} // end func
</script>

<select name="select1" id="select1" onchange="process_selection(this)">
<option value="">-- choose one --</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>


<select name="select2" id="select2" onchange="process_selection(this)">
<option value="">-- choose one --</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>


<select name="select3" id="select3" onchange="process_selection(this)">
<option value="">-- choose one --</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>


<select name="select4" id="select4" onchange="process_selection(this)">
<option value="">-- choose one --</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>