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＆gt; 7和其他人被禁用。但是现在如果我想选择Oracle Linux＆gt; 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。

由于您提供的标记中包含HTML <option>属性，因此每个选择的第一个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);
    }
  });
});

希望这有帮助！

Answer 2

向每个选择框添加功能，并onchange调用功能以禁用其余选择元素

＆＃13;

function selectThis(obj){
var selectelems=document.getElementsByTagName('select')
for(var i=0;i<selectelems.length;i++){
	if(selectelems[i]!=obj){
  		selectelems[i].setAttribute('disabled','true')
  }
}
}

＆＃13;

<table id="table_os" class="table table-bordered">
<tbody>
<tr>
    <td class="text-center">
        <div><img src="https://www.haskell.org/platform/img/distro-redhat.svg" width="60px"></div>
        <div><h6><span class="semi-bold">Red Hat Linux</span></h6></div>
        <select class="form-control" style="text-align-last: center;" onchange="selectThis(this)">
            <option value="" selected >Select version</option>
            <option value="rhel7">7 (latest) </option>
        </select>
    </td>
    <td class="text-center">
        <div><img src="http://austinlinux.com/local/Oracle%20Linux.jpg" width="51px"></div>
        <div><h6><span class="semi-bold">Oracle Linux</span></h6></div>
        <select class="form-control" style="text-align-last: center;" onchange="selectThis(this)">
            <option value="" selected >Select version</option>
            <option value="oel7">7 (latest)</option>
        </select>
    </td>
    <td class="text-center">
        <div><img src="http://seeklogo.com/images/C/centos-logo-494F57D973-seeklogo.com.png" width="60px"></div>
        <div><h6><span class="semi-bold">CentOS Linux</span></h6></div>
        <select class="form-control" style="text-align-last: center;" onchange="selectThis(this)">
            <option value="" selected >Select version</option>
            <option value="centos7">7 (latest)</option>
        </select>
    </td>
    <td class="text-center">
        <div><img src="https://images.seeklogo.net/2012/12/windows-8-icon-logo-vector-400x400.png" width="60px"></div>
        <div><h6><span class="semi-bold">Microsoft Windows</span></h6></div>
        <select class="form-control" style="text-align-last: center;" onchange="selectThis(this)">
            <option value="" selected >Select version</option>
            <option value="win2012r2">Standard 2012 R2</option>
        </select>
    </td>
</tr>
</tbody>

＆＃13;

Answer 3

使用此

$('select').on('change',function(){
     $(this).parents('tr').siblings('tr').find('select').not($(this)).prop('disabled', true);
});

互斥选择/下拉菜单

3 个答案: