javascript - 互斥的选择/下拉列表

Question

我正在尝试使用 JS 创建互斥的下拉菜单。

只能从这 4 个操作系统中选择一个:image

当一个被选中时，其他的应该被禁用。

HTML 部分:

<table id="table_os" class="table table-bordered">
<tbody>
<tr>
    <td class="text-center">
        <div><img src="distro-redhat.png"></div>
        <div><h6><span class="semi-bold">Red Hat Linux</span></h6></div>
        <select class="form-control" style="text-align-last: center;">
            <option value="" selected disabled>Select version</option>
            <option value="rhel7">7 (latest) </option>
        </select>
    </td>
    <td class="text-center">
        <div><img src="oel.png"></div>
        <div><h6><span class="semi-bold">Oracle Linux</span></h6></div>
        <select class="form-control" style="text-align-last: center;">
            <option value="" selected disabled>Select version</option>
            <option value="oel7">7 (latest)</option>
        </select>
    </td>
    <td class="text-center">
        <div><img src="centos.png"></div>
        <div><h6><span class="semi-bold">CentOS Linux</span></h6></div>
        <select class="form-control" style="text-align-last: center;">
            <option value="" selected disabled>Select version</option>
            <option value="centos7">7 (latest)</option>
        </select>
    </td>
    <td class="text-center">
        <div><img src="windows.png"></div>
        <div><h6><span class="semi-bold">Microsoft Windows</span></h6></div>
        <select class="form-control" style="text-align-last: center;">
            <option value="" selected disabled>Select version</option>
            <option value="win2012r2">Standard 2012 R2</option>
        </select>
    </td>
</tr>
</tbody>

寻求 JS 部分的帮助。

更新:也许，我说“其他人应该被禁用”误导了大家。当然，应该可以选择任何值，但始终只选择一个值。例如:目前，我选择 Red Hat > 7，其他的都被禁用。但现在如果我想选择 Oracle Linux > 7，我应该可以这样做。这意味着其他下拉菜单应该“重置”为“选择版本”

Answer 1

这可以通过收听 change 来完成<select> 事件元素然后利用 jQuery not()针对其他<select>元素:

$(document).ready(function() {
  var $table = $('#table_os');

  $table.find('select').on('change', function() {
    var val = $(this).val();

    if (val !== '') {
      $(this).closest('tr').find('select').not($(this)).prop('disabled', true);
    }
  });
});

这是一个jsfiddle演示功能。

作为第一个<option>由于 HTML disabled，每个选择都被禁用您在提供的标记中拥有的属性，一旦它们被禁用，它们将保持原样。

如果删除 disabled默认/第一个属性 <option>每个 <select>如果用户选择此默认/第一个选项以防他们改变主意，您可以轻松构建功能以重新启用其他下拉菜单。这是 jsfiddle :

$(document).ready(function(){
  var $table = $('#table_os')

  $table.find('select').on('change', function(){
    var val = $(this).val();

    var $otherSelects = $(this).closest('tr').find('select').not($(this));

    if(val !== '') {
        $otherSelects.prop('disabled', true);
    }
    else {
        $otherSelects.prop('disabled', false);
    }
  });
});

希望这对您有所帮助!