Мне нужно адаптировать некоторый код, который я использовал для веб-сайта, который я создаю, для школы, в которой я работаю, чтобы запретить выбор определенных опций одновременно.

Пользователю представлен следующий HTML-выпадающий список 6 раз:

<select type="select" name="optRes2" select id="optRes2">
    <option value="" disabled selected hidden>Please select an option...</option>
    <option value="Art">Art</option>
    <option value="Business Studies">Business Studies</option>
    <option value="Computing">Computing</option>
    <option value="Drama">Drama</option>
    <option value="French">French</option>
    <option value="Food Technology">Food Technology</option>
    <option value="Geography">Geography</option>
    <option value="German">German</option>
    <option value="History">History</option>
    <option value="Music">Music</option>
    <option value="Philosophy and Ethics">Philosophy and Ethics</option>
    <option value="Product Design">Product Design</option>
    <option value="Physical Education">Physical Education</option>
    <option value="Spanish">Spanish</option>
    <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
    <option value="Textiles">Textiles</option>
</select>

Пользователь НЕ должен иметь возможность одновременно выбирать искусство и текстиль. Они могут выбрать либо искусство, либо текстиль, но не оба.

Например: Пользователь выбирает «Искусство» в opt1, поэтому Текстиль отключен в оставшихся 5 меню. Если пользователь возвращается и отменяет выбор «Искусство», текстиль должен быть включен повсюду. Надеюсь, вы понимаете, о чем я.

У меня уже есть код для предотвращения выбора одной и той же опции несколько раз:

$(function() {
    $('select').change(function(){
        if($(this).attr('id') == 'opt1' && $(this).val() == 'Default'){
            $('select').not(this).prop('disabled', true).val('Disabled');
        } else {
            $('select').not(this).removeProp('disabled');
            $('select option').removeProp('disabled');
            $('select').each(function() {
                var val = $(this).val();
                if(val != 'Default' || val != 'Disabled'){
                    $('select option[value="'+val+'"]').not(this).prop('disabled', true);
                }
            });
        }
    });
});

Затем пользователь нажимает кнопку «Отправить», и все это затем отправляется на сервер MySQL для последующего просмотра.

Меню называются opt1, opt2, opt3, opt4, optRes1 и optRes2.

Спасибо всем,

Разъем

1
Jack Anyon 9 Янв 2017 в 13:18

3 ответа

Лучший ответ

Я использую атрибут данных с именем notallowed. Там вы можете указать, какое значение следует отключить. И когда значение изменяется, мы также проверяем, отключили ли мы ранее некоторые поля, и снова их активируем.

$('select').change(function(){
    
    var notAllowed = $(this).find('option:selected').data('notallowed');
    var currentValue = $(this).val();
    // Get the previous selected value.
    var oldValue = $(this).data('old');
    
    // Keep track of the previous selected value.
    $(this).data('old', currentValue);
    
    // Re-enabled all that was disabled by the previous selection.
    if(oldValue) {
      // Re-enable the old value in the other selects.
      $('select').not(this).find('option[value="' + oldValue +'"]').prop('disabled', false);
      
      // Get the option.
      var previousNotAllowed = $(this).find('option[value="' + oldValue +'"]').data('notallowed');
      if(previousNotAllowed){
        $('select').not(this).find('option[value="' + previousNotAllowed +'"]').prop('disabled', false);
      }
    }
    
  // If we selected a option with notallowed attribute we should disable that option in the other selects.
    if(notAllowed){
      var items = $('select').not(this).find('option[value="' + notAllowed +'"]').prop('disabled',true);
    }
  
  // Disable the current value in other selects.  
  $('select').not(this).find('option[value="' + currentValue +'"]').prop('disabled', true);
    
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type="select" name="optRes1" select id="optRes1">
  <option value="" disabled selected hidden>Please select an option...</option>
  <option value="Art" data-notallowed="Textiles">Art</option>
  <option value="Business Studies">Business Studies</option>
  <option value="Computing" data-notallowed="Drama">Computing</option>
  <option value="Drama" data-notallowed="Computing">Drama</option>
  <option value="French">French</option>
  <option value="Food Technology">Food Technology</option>
  <option value="Geography">Geography</option>
  <option value="German">German</option>
  <option value="History">History</option>
  <option value="Music">Music</option>
  <option value="Philosophy and Ethics">Philosophy and Ethics</option>
  <option value="Product Design">Product Design</option>
  <option value="Physical Education">Physical Education</option>
  <option value="Spanish">Spanish</option>
  <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
  <option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
 
<select type="select" name="optRes2" select id="optRes2">
  <option value="" disabled selected hidden>Please select an option...</option>
  <option value="Art" data-notallowed="Textiles">Art</option>
  <option value="Business Studies">Business Studies</option>
  <option value="Computing" data-notallowed="Drama">Computing</option>
  <option value="Drama" data-notallowed="Computing">Drama</option>
  <option value="French">French</option>
  <option value="Food Technology">Food Technology</option>
  <option value="Geography">Geography</option>
  <option value="German">German</option>
  <option value="History">History</option>
  <option value="Music">Music</option>
  <option value="Philosophy and Ethics">Philosophy and Ethics</option>
  <option value="Product Design">Product Design</option>
  <option value="Physical Education">Physical Education</option>
  <option value="Spanish">Spanish</option>
  <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
  <option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
    <option value="" disabled selected hidden>Please select an option...</option>
  <option value="Art" data-notallowed="Textiles">Art</option>
  <option value="Business Studies">Business Studies</option>
  <option value="Computing" data-notallowed="Drama">Computing</option>
  <option value="Drama" data-notallowed="Computing">Drama</option>
  <option value="French">French</option>
  <option value="Food Technology">Food Technology</option>
  <option value="Geography">Geography</option>
  <option value="German">German</option>
  <option value="History">History</option>
  <option value="Music">Music</option>
  <option value="Philosophy and Ethics">Philosophy and Ethics</option>
  <option value="Product Design">Product Design</option>
  <option value="Physical Education">Physical Education</option>
  <option value="Spanish">Spanish</option>
  <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
  <option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
0
smoksnes 9 Янв 2017 в 11:13

Попробуйте добавить перекрывающий элемент div с идентификатором выбора, а затем выберите каждый выбор и отключите выбранную опцию при изменении следующим образом:

<div id="selection">
            <select type="select" name="optRes2" select id="optRes2">
                <option value="" disabled selected hidden>Please select an option...                       </option>
                <option value="Art">Art</option>
                 etc
            </select>
    <select type="select" name="optRes3" select id="optRes3">
                <option value="" disabled selected hidden>Please select an option...                       </option>
                <option value="Art">Art</option>
                 etc
            </select>
    </div>

И сценарий

<script type="text/JavaScript" language="JavaScript">
    $( "#optRes2" ).change(function() {
      $("div#selection select.select option").each(function(){
             if($(this).val()== $('#optRes2').val() ){ 
                $(this).attr("disabled","true");    
             }
       });
    });
    $( "#optRes3" ).change(function() {
      $("div#selection select.select option").each(function(){
             if($(this).val()== $('#optRes3').val() ){ 
                $(this).attr("disabled","true");    
             }
       });
    });
</script>
0
Jesse de gans 9 Янв 2017 в 10:41

Лучше создать массив опций и работать с данными, а не с HTML. Используя этот подход, вы сможете оставаться сухим.

Думаю, решение ясно.

<html>
<body>

<select type="select" name="optRes3" select id="optRes1">
    <option value="" disabled selected hidden>Please select an option...</option>
  <option value="Art">Art</option>
  <option value="Business Studies">Business Studies</option>
  <option value="Computing">Computing</option>
  <option value="Drama">Drama</option>
  <option value="French">French</option>
  <option value="Food Technology">Food Technology</option>
  <option value="Geography">Geography</option>
  <option value="German">German</option>
  <option value="History">History</option>
  <option value="Music">Music</option>
  <option value="Philosophy and Ethics">Philosophy and Ethics</option>
  <option value="Product Design">Product Design</option>
  <option value="Physical Education">Physical Education</option>
  <option value="Spanish">Spanish</option>
  <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
  <option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes2">
    <option value="" disabled selected hidden>Please select an option...</option>
  <option value="Art">Art</option>
  <option value="Business Studies">Business Studies</option>
  <option value="Computing">Computing</option>
  <option value="Drama">Drama</option>
  <option value="French">French</option>
  <option value="Food Technology">Food Technology</option>
  <option value="Geography">Geography</option>
  <option value="German">German</option>
  <option value="History">History</option>
  <option value="Music">Music</option>
  <option value="Philosophy and Ethics">Philosophy and Ethics</option>
  <option value="Product Design">Product Design</option>
  <option value="Physical Education">Physical Education</option>
  <option value="Spanish">Spanish</option>
  <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
  <option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
    <option value="" disabled selected hidden>Please select an option...</option>
  <option value="Art">Art</option>
  <option value="Business Studies">Business Studies</option>
  <option value="Computing">Computing</option>
  <option value="Drama">Drama</option>
  <option value="French">French</option>
  <option value="Food Technology">Food Technology</option>
  <option value="Geography">Geography</option>
  <option value="German">German</option>
  <option value="History">History</option>
  <option value="Music">Music</option>
  <option value="Philosophy and Ethics">Philosophy and Ethics</option>
  <option value="Product Design">Product Design</option>
  <option value="Physical Education">Physical Education</option>
  <option value="Spanish">Spanish</option>
  <option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
  <option value="Textiles">Textiles</option>
</select>

<script>
function OptResDropdown(htmlDropdown, value) {
    this.value = value;
    this.dropdown = htmlDropdown;
    this.options = this.initOptions(htmlDropdown.options);
    var selected = htmlDropdown.options[htmlDropdown.selectedIndex];
    this.value = value? value : (selected ? selected.value : 0); 
    var me = this;
    htmlDropdown.addEventListener('change', function(event){
        me.value = event.target.value;
        me.update(me.value);
    });
    this.update();
}

OptResDropdown.instances = {};

OptResDropdown.prototype.initOptions = function(options){
    var me = this;
    var out = [];
    for(var i = 0; i < options.length; i++) {
        var option = options[i];
        out.push({value: option.value, label: option.innerText});
    }
    return out;
};

OptResDropdown.prototype.update = function(value) {
    for(var key in OptResDropdown.instances) {
        var me = OptResDropdown.instances[key];
        me.dropdown.innerHTML = '';
        var options;
        if(value === 'Art') {
            options = me.options.filter(function(option){
                return option.value !== 'Textiles';
            });
        } else if(value === 'Textiles') {
            options = me.options.filter(function(option){
                return option.value !== 'Art';
            });
        } else {
            options = me.options;
        }
        options.forEach(function(option){
            var opt = document.createElement('option');
            opt.value = option.value;
            opt.innerText = option.label;
            me.dropdown.appendChild(opt);
        })
        me.dropdown.value = me.value;
    }
};



var opt1 = new OptResDropdown(optRes1);
var opt2 = new OptResDropdown(optRes2);
var opt3 = new OptResDropdown(optRes3);

OptResDropdown.instances.opt1 = opt1;
OptResDropdown.instances.opt2 = opt2;
OptResDropdown.instances.opt3 = opt3;

</script>
</body>
</html>
0
degr 9 Янв 2017 в 12:10