как отключить варианты выпадающего меню на основе ранее выбранных значений выпадающего списка в раскрывающемся списке нескольких элементов?

Question

У меня есть два раскрывающихся списка для нескольких вариантов. эти два выпадающих списка будут иметь одинаковый набор параметров (например, понедельник, вторник, среда). теперь я хочу иметь валидацию, где в одном раскрывающемся списке выбранных для некоторых параметров (это всплывающие окна с несколькими выборами), тогда одни и те же параметры не должны быть доступны для выбора из другого выпадающего списка (это значит, что они должны быть отключены). Здесь для multi select я использую один UI js-плагин multi select dropdown javascript plugin.

<label for="shift_day_list_1">Day</label> 
     <input name="shift[day_list_1][]" type="hidden" value="" /><select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"><option value="Sunday">Sunday</option> 
<option value="Monday">Monday</option> 
<option value="Tuesday">Tuesday</option> 
<option value="Wednesday">Wednesday</option> 
<option value="Thursday">Thursday</option> 
<option value="Friday">Friday</option> 
<option value="Saturday">Saturday</option></select> 

<label for="shift_day_list_2">Day</label> 
     <input name="shift[day_list_2][]" type="hidden" value="" /><select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"><option value="Sunday">Sunday</option> 
<option value="Monday">Monday</option> 
<option value="Tuesday">Tuesday</option> 
<option value="Wednesday">Wednesday</option> 
<option value="Thursday">Thursday</option> 
<option value="Friday">Friday</option> 
<option value="Saturday">Saturday</option></select> 

это мой JS код:

$(document).ready(function() { 
    // alert("dddddddd"); 
     // $('#day_list_1').multiselect(); 
     $('#day_list_1').SumoSelect({ 
     placeholder: 'Select Days', 
     csvDispCount: 3 
     }); 

     $('#day_list_2').SumoSelect({ 
     placeholder: 'Select Days', 
     csvDispCount: 3 
     }); 
}); 

, как осуществить это? пожалуйста помогите?

Answer 1

Я создал полный комментировал фрагмент кода для вас:

// when all the elements in the DOM are loaded 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    // get both lists and their HTMLOptionElement nodes 
 
    var list1 = document.getElementById('day_list_1'), 
 
     list2 = document.getElementById('day_list_2'), 
 
     options1 = list1.querySelectorAll('option'), 
 
     options2 = list2.querySelectorAll('option'); 
 
    
 
    // add event handlers when the lists are changed to call the update function 
 
    $(list1).change(update).SumoSelect(); 
 
    $(list2).change(update).SumoSelect(); 
 

 
    function update(e) { 
 
    // when the lists are changed, loop through their HTMLOptionElement nodes 
 
    var other = (list1 === this) ? list2 : list1;  
 
    for (var i = 0; i < options1.length; i++) { 
 
     // options of list1 should be disabled if selected in list2 and vice-versa 
 
     this[i].selected ? other.sumo.disableItem(i) : other[i].selected ? void 0 : other.sumo.enableItem(i); 
 
    } 
 
    } 
 
});

.form-control { 
 
    width: 130px; 
 
    height: 130px; 
 
}

<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.min.js"></script> 
 

 
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"> 
 
    <option value="Sunday">Sunday</option> 
 
    <option value="Monday">Monday</option> 
 
    <option value="Tuesday">Tuesday</option> 
 
    <option value="Wednesday">Wednesday</option> 
 
    <option value="Thursday">Thursday</option> 
 
    <option value="Friday">Friday</option> 
 
    <option value="Saturday">Saturday</option> 
 
</select> 
 

 
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"> 
 
    <option value="Sunday">Sunday</option> 
 
    <option value="Monday">Monday</option> 
 
    <option value="Tuesday">Tuesday</option> 
 
    <option value="Wednesday">Wednesday</option> 
 
    <option value="Thursday">Thursday</option> 
 
    <option value="Friday">Friday</option> 
 
    <option value="Saturday">Saturday</option> 
 
</select>

Answer 2

Взгляните на этот jsfiddle Click here for jsfiddle example

$("#theSelect option[value=" + value + "]").attr('disabled', 'disabled'); 

Но перед этим, вам нужно добавить событие изменения к первому выберите/DropDownList. Я надеюсь, что вы можете взять здесь.

Answer 3

вы можете использовать нормальный js для достижения этого. Используйте этот следующий код в day_list_ 1 для события onChange.

document.getElementById("day_list_2").options[document.getElementById("day_list_‌​1").selectedIndex].disabled = true;

Answer 4

Попробуйте это:

$('#day_list_1').on('change', function() { 
 
    $('#day_list_2').find('option').removeProp('disabled'); 
 
    var val = $(this).val() || []; 
 
    val.forEach(function(item) { 
 
    $('#day_list_2').find('[value=' + item + ']').prop('disabled', 'disabled'); 
 
    }); 
 
}); 
 
$('#day_list_2').on('change', function() { 
 
    $('#day_list_1').find('option').removeProp('disabled'); 
 
    var val = $(this).val() || []; 
 
    val.forEach(function(item) { 
 
    $('#day_list_1').find('[value=' + item + ']').prop('disabled', 'disabled'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label for="day_list_1">Day</label> 
 
<input type="hidden" value="" /> 
 
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"> 
 
    <option value="Sunday">Sunday</option> 
 
    <option value="Monday">Monday</option> 
 
    <option value="Tuesday">Tuesday</option> 
 
    <option value="Wednesday">Wednesday</option> 
 
    <option value="Thursday">Thursday</option> 
 
    <option value="Friday">Friday</option> 
 
    <option value="Saturday">Saturday</option> 
 
</select> 
 

 

 
<label for="day_list_2">Day</label> 
 
<input type="hidden" value="" /> 
 
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]"> 
 
    <option value="Sunday">Sunday</option> 
 
    <option value="Monday">Monday</option> 
 
    <option value="Tuesday">Tuesday</option> 
 
    <option value="Wednesday">Wednesday</option> 
 
    <option value="Thursday">Thursday</option> 
 
    <option value="Friday">Friday</option> 
 
    <option value="Saturday">Saturday</option> 
 
</select>

Answer 5

Сначала вы должны изменить идентификатор «day_list_1», поскольку в соответствии со стандартом HTML во всем HTML-теге есть только один идентификатор.

Таким образом, вы должны сделать так:

Первый:

<select class="form-control" id="day_list_1" multiple="multiple" 
name="shift[day_list_1][]"> 

Следующая одно:

<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]"> 

код для проверки:

function validate(){ 

    var error = false; 
    var selected_val_1 = []; 
    $('#day_list_1 :selected').each(function(i, selected){ 
    selected_val_1[i] = $(selected).text(); 
    }); 

    var selected_val_2 = []; 
    $('#day_list_2 :selected').each(function(i, selected){ 
    selected_val_2[i] = $(selected).text(); 
    }); 

    $.each(selected_val_1, function(index, value) { 
       if($.inArray(value, selected_val_2) != -1){ 
        error = true; 
       } 
    }); 

    $.each(selected_val_2, function(index, value) { 
       if($.inArray(value, selected_val_1) != -1){ 
        error = true; 
       } 
    }); 

    if(error == true){ 
    return true; 
    }else{ 
    return false; 
    } 

} 

Я надеюсь, что это помогает вы . Если у вас есть какие-либо вопросы относительно этой логики, вы можете вернуть меня.

Спасибо.