Javascript 禁用两个多重选择之间的选项

我有这样的情况：

2个具有相同选项数和相同值的多重选择：

<select id="first" name="first" multiple>
     <option value="1" id="1">First</option>
     <option value="2" id="2">Second</option>
     <option value="3" id="3">Third</option>
</select>

<select id="second" name="second" multiple>
     <option value="1" id="1">First</option>
     <option value="2" id="2">Second</option>
     <option value="3" id="3">Third</option>
</select>

弗斯特
第二
第三
弗斯特
第二
第三

如果我在第一个元素中选择一个元素，我必须在第二个元素中禁用它。如果我取消选择第一个元素中的某个元素，我必须激活第二个元素中的该元素（不选择）。第二次选择的情况相同

我该怎么做

---

提前谢谢

应该很容易实现

到目前为止你试过什么

大致轮廓如下：

将函数绑定到每个选择字段上的更改事件，并创建一个函数以根据第一个字段的选定值更新另一个下拉列表。根据您所做的操作，如果用户禁用了javascript，服务器端验证也可能是可取的。

$（“#第一，#第二”）。更改（函数（）{
$("#first, #second").change(function(){
   var index;
   for (var i = 0; i < $(this).find("option").length; i++){
      if ($(this).find("option").eq(i).attr("selected") == true){
         index = i;
         break;
      }
   }
   if (index){
      var target = ($(this).attr("id") == "first") ? $("#second) : $("#first");
      $(target).find("option").eq(index).attr("disabled", true); 
   }
}

var指数；
对于（var i=0；i<$（this）.find（“option”）.length；i++）{
if（$（this.find（“option”）.eq（i）.attr（“selected”）==true）{
指数=i；
打破
}
}
如果（索引）{
var目标=（$（this）.attr（“id”）==“first”）？$（“second”）：$（“first”）；
$（目标）.find（“option”）.eq（index）.attr（“disabled”，true）；
}
}

您必须具有唯一的ID。我建议使用类而不是ID，如

class=“opt1”

等

关于jQuery行为，请尝试以下方法：

var $select = $('select');
$select.on('change', function () {
    $select.find('option').attr('disabled', false);
    var selectedValue = this.value;
    $('select').not(this).find('option').filter(function () {
        return this.value == selectedValue
    }).attr("disabled", "disabled");
});

弗斯特
第二
第三
弗斯特
第二
第三
函数selectedItem（下拉列表，值）{
var changed=（dropdown.id='first'）？'second'：'first'；
如果（值=“”）{
document.getElementById（已更改）.disabled=false；
}否则{
document.getElementById（已更改）.disabled=true；
}
}

给这两个元素一个类，例如，

相互排除

。然后：

$(".mutual-exclude").change(function () {
    var $other = $(".mutual-exclude").not(this);
    $(this).children("option").each(function () {
        $other.find("[value='" + this.value + "']").prop('disabled', this.selected);
    });
});

---

用另一个纯DOM解决方案把我的帽子扔进拳击场。我想这就是你想要做的

给定提供的HTML（并更改ID使其有效：）

弗斯特
第二
第三
弗斯特
第二
第三
函数切换（）{
var a=document.getElementById（“第一”）.options；
var b=document.getElementById（“第二个”）.options；
对于（变量i=0；i

这是“纯javascript”解决方案（也适用于jQuery）。只需将其放入卸载处理程序中即可

// Find the selectboxes
var first = document.getElementById("first");
var second = document.getElementById("second");

function attach(source, target) {
    source.onchange = function (e) { // Subsribe to the onchange event
        target.value = ""; // Disable the selection in the other selectbox
        for (var i = 0; i < source.children.length; i++) { // Loop over all the options
             // Enable all the options for the source selectbox
            source.children[i].disabled = false;
            // Disable the selected source option (if any) on the target side
            target.children[i].disabled = i === (source.value && (parseInt(source.value, 10) - 1)); 
        }
    };
}

// Bind both selectboxes to each other
attach(first, second);
attach(second, first);

//查找选择框
var first=document.getElementById（“first”）；
var second=document.getElementById（“second”）；
函数附加（源、目标）{
source.onchange=函数（e）{//onchange事件的子脚本
target.value=”“；//禁用其他选择框中的选择
对于（var i=0；i

---

要查看它的实际应用，请查看此

请向我们展示您迄今为止尝试过的内容。您（至少）尝试过两个元素共享每个数字

id

s。这是无效的。感谢这项工作！！：）@Krishna它为我做了。我在第1列中单击第一个，第2列中的第一个变为非活动状态。然后我在第1列中单击第二个，第2列中的第一个变为活动状态，第2列中的第二个变为非活动状态。简单任务的开销很大。没有jQuery函数out；-）@SplitYourInfinity可能是真的，但它的优点是它可以工作。对不起，还没有玩过那个插件，暂时不知道。

<select id="first" name="first" multiple="true" onchange="toggle();">
     <option value="1" id="1a">First</option>
     <option value="2" id="2a">Second</option>
     <option value="3" id="3a">Third</option>
</select>

<select id="second" name="second" multiple="true" onchange="toggle();">
     <option value="1" id="1b">First</option>
     <option value="2" id="2b">Second</option>
     <option value="3" id="3b">Third</option>
</select>


function toggle() {
    var a = document.getElementById("first").options;
    var b = document.getElementById("second").options;
    for (var i = 0; i < a.length; i++) {
        b[i].disabled = a[i].selected;
        a[i].disabled = b[i].selected;
    }
}

// Find the selectboxes
var first = document.getElementById("first");
var second = document.getElementById("second");

function attach(source, target) {
    source.onchange = function (e) { // Subsribe to the onchange event
        target.value = ""; // Disable the selection in the other selectbox
        for (var i = 0; i < source.children.length; i++) { // Loop over all the options
             // Enable all the options for the source selectbox
            source.children[i].disabled = false;
            // Disable the selected source option (if any) on the target side
            target.children[i].disabled = i === (source.value && (parseInt(source.value, 10) - 1)); 
        }
    };
}

// Bind both selectboxes to each other
attach(first, second);
attach(second, first);