Question

我正在创建一个网站，其中有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>

我不能在这个中选择它。所以它应该在选项一中说disabled。

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

我不知道自己该怎么做，所以如果有人可以帮助我，我会很高兴。

Answer 1

为了提供更好的用户体验，您应该在用户选择下拉内容时使用JavaScript禁用这些项目。你有机会使用jQuery吗？

您还应该在服务器上强制执行它，因为通常不会信任客户端。

Answer 2

如果我理解正确，那么通过复选框可以更好地完成您想要实现的目标。

而不是<select>执行此操作：

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

Answer 3

以下代码可以满足您的要求。我也做了jsfiddle

它将正确禁用和启用选项，因为任何选择输入的选项都会更改。

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>

适用于上述

的HTML

但实际上上面的代码可以通过编辑上面js代码中指示的一行来处理页面上的任何选择输入

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

Answer 4

正如其他人所提到的，在复选框中执行此操作是一种更简洁的方法。但是，为了提高我的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);
}

请参阅jsFiddle

多个相同的<select>标签，其中每个选项可以选择一次</select>

4 个答案: