Jak zmienić dynamicznie wybrane opcje na podstawie innych opcji w JQuery?

Question

proszę zobaczyć obraz HTML wybiera

Chodzi tutaj: jeśli użytkownik wybierze „A” w pierwszym HTML liście select, „A” nie powinny pojawiać się w innych wybranych list HTML. To powinno być dynamicznie aktualizowane na wszystkich listach, nawet jeśli użytkownik zacznie wybierać na jednej z list wyboru w środku. Poniższy kod jest niepełnym niepełnym rozwiązaniem częściowym. Myślę, że jest powtarzalny. Chcę tylko wydobywać opcje z list wyboru HTML, dopóki użytkownik nie osiągnie ostatniego wyboru, pozostaje tylko jedna opcja.
wybierze mają identyfikatory "1", "2" itd ...
Mam następujący kod jQuery:

    <script> 
    $(document).ready(function() { 
    $("#1").change(function() { 
    var val = $(this).val(); 
    if (val == "A") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); 
    } else if (val == "B") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); 
    } else if (val == "C") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A'>A</option><option value='B'>B</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); 
    } else if (val == "D") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); 
    } else if (val == "E") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); 
    } else if (val == "F") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); 
    } else if (val == "G") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); 
    } else if (val == "H") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='I'>I</option><option value='J'>J</option>"); 
    } else if (val == "I") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='J'>J</option>"); 
    } else if (val == "J") { 
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option>"); 
    } 
    // end of ("#1").change JQUERY Function 
    }); 
    //end of .ready JQuery Function 
    }); 

    </script> 

żadnych pomysłów, które łatwo byłoby bardzo mile widziane. Z góry dziękuję za pomoc.

Answer 1

Oto przykład użycia disabled zamiast usuwania opcji. działa to również w celu cofnięcia wyboru lub zmiany opcji.

$('select').change(function() { 
 
    // find the other selects 
 
    var otherSelects = $('select').not(this); 
 
    // get the old value of this select 
 
    var oldValue = $(this).data('old'); 
 
    //remove disabled from the other selects option for the old value 
 
    if (oldValue) 
 
    otherSelects.find('option[value=' + oldValue + ']').removeAttr('disabled'); 
 
    //add disabled for the other selects option for the new value 
 
    if (this.value) 
 
    otherSelects.find('option[value=' + this.value + ']').attr('disabled', 'disabled'); 
 
    // store the new value as old 
 
    $(this).data('old', this.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select> 
 
    <option></option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
</select> 
 

 
<select> 
 
    <option></option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
</select> 
 

 
<select> 
 
    <option></option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
</select>

Answer 2

widzę ja już pokonać do niego ... Ale jak już zainwestował spore ilości czasu, oto rozwiązanie, które naprawdę usuwa wszystkie opcje, które są już zaznaczone (zredukowana do trzech wybiera zrobić to prostsze, wystarczy dostosować opcje object):

$(document).ready(function() { 
 
var $allSelects = $('select.choice'); 
 

 
\t $allSelects.change(function() { 
 
    \t var $this = $(this), 
 
    \t $otherSelects = $allSelects.not($this); 
 
    
 
    \t $otherSelects.each(function() { 
 
    \t var $this = $(this), currentVal = $this.val(), 
 
    \t \t  options = {A: 0, B: 0, C: 0}, 
 
      newOptionsMarkup = '<option value=""></option>'; 
 
     
 
     for (o in options) { 
 
     \t \t if (o == currentVal || !$('option[value="' + o + '"]:selected', $allSelects.not($this)).length) { 
 
      \t newOptionsMarkup+= '<option value="' + o + '">' + o + '</option>'; 
 
      }  \t \t 
 
     } 
 
    \t $this.empty().html(newOptionsMarkup).find('option[value="' + currentVal + '"]').attr('selected', true); 
 
    \t }); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="choice"> 
 
<option value=""></option> 
 
<option value="A">A</option> 
 
<option value="B">B</option> 
 
<option value="C">C</option> 
 
</select> 
 

 
<select class="choice"> 
 
<option value=""></option> 
 
<option value="A">A</option> 
 
<option value="B">B</option> 
 
<option value="C">C</option> 
 
</select> 
 

 
<select class="choice"> 
 
<option value=""></option> 
 
<option value="A">A</option> 
 
<option value="B">B</option> 
 
<option value="C">C</option> 
 
</select>

Zgodnie zagadek komentować rozwiązania Beng, oto jest droga, jeśli chcesz zachować wszystkie opcje we wszystkich wybiera i po prostu chcą, aby zresetować inne listy wyboru, gdzie został już wybrany:

$(document).ready(function() { 
 
var $allSelects = $('select.choice'); 
 

 
\t $allSelects.change(function() { 
 
    \t var $this = $(this), 
 
     $otherSelects = $allSelects.not($this); 
 
    
 
     $('option[value="' + $this.val() + '"]:selected', $otherSelects).parent().val(''); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="choice"> 
 
<option value=""></option> 
 
<option value="A">A</option> 
 
<option value="B">B</option> 
 
<option value="C">C</option> 
 
</select> 
 

 
<select class="choice"> 
 
<option value=""></option> 
 
<option value="A">A</option> 
 
<option value="B">B</option> 
 
<option value="C">C</option> 
 
</select> 
 

 
<select class="choice"> 
 
<option value=""></option> 
 
<option value="A">A</option> 
 
<option value="B">B</option> 
 
<option value="C">C</option> 
 
</select>

Answer 3

Widzę, że byłem bity. Oto moje rozwiązanie.

Jednak to rozwiązanie wymaga operacji O (n) za każdym razem, gdy coś jest wybrane do wygenerowania tablicy "używanych" wartości, co nie jest idealne.

$("#row1 > select").change(function() { 
 
    var selected = []; 
 
    $('#row1 > select').each(function() { 
 
    selected.push(this.value); 
 
    }); 
 
    $("#row1 > select option").prop('disabled', false); 
 
    $.each(selected, function(index, value) { 
 
    $("#row1 > select option[value='" + value + "']").prop('disabled', true); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="row1"> 
 
    <select> 
 
    <option disabled selected value>--</option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
    </select> 
 
    <select> 
 
    <option disabled selected value>--</option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
    </select> 
 
    <select> 
 
    <option disabled selected value>--</option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
    </select> 
 
</div>