禁用 2 个多选之间的选项

Question

我有这种情况：

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>

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

我该怎么做？

提前致谢。

Answer 1

应该很容易实现。

到目前为止，您尝试过什么？

大致轮廓：

将函数绑定到每个选择字段上的更改事件，并创建一个函数以根据第一个的选定值更新另一个下拉列表。根据您正在执行的操作，在用户禁用 javascript 的情况下，也可能建议进行一些服务器端验证。

Answer 2

$("#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); 
   }
}

Answer 3

您必须有唯一的 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");
});

Demo

Answer 4

http://jsfiddle.net/bkDX3/

<select id="first" name="first" multiple onchange="selectedItem(this, this.value)">
    <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 onchange="selectedItem(this, this.value)">
    <option value="1" id="1">First</option>
    <option value="2" id="2">Second</option>
    <option value="3" id="3">Third</option>
</select>

<script>
function selectedItem(dropdown, value) {
    var changed = (dropdown.id == 'first') ? 'second' : 'first';
    if (value == '') {
        document.getElementById(changed).disabled = false;
    } else {
        document.getElementById(changed).disabled = true;
    }
}
</script>

Answer 5

给这两个元素一个类，例如mutual-exclude。那么：

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

DEMO

Answer 6

用另一个纯 DOM 解决方案将我的帽子扔进戒指。我认为这就是你想要做的。 . ?

给定提供的 HTML（并更改 id 以使其有效:)）

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

Answer 7

NO jQuery or HTML change needed

这是“纯 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);

要查看它的实际效果，请查看此 JSFiddle demo。