Question

我遇到这种情况：

2 Multi选择具有相同数量的选项和相同的值：

<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

实现起来应该是微不足道的。

到目前为止你尝试了什么？

粗略概述：

将函数绑定到每个选择字段上的change事件，并创建一个函数以根据第一个选择的值更新另一个下拉列表。根据您正在进行的操作，如果用户禁用了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 。

禁用2个多选项之间的选项

7 个答案:

Demo

NO jQuery or HTML change needed