Взаимные эксклюзивные выделения/выпадающие списки

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

Надеется, что это помогает!

Answer 2

использовать этот

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

Answer 3

Добавить функцию к каждому полю выбора и функциям onchange вызова, чтобы отключить остальное отборных элементы

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

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