Seçme seçeneklerini JQuery'deki diğer seçme seçeneklerine göre dinamik olarak nasıl değiştirebilirim? Kullanıcı ilk HTML Seçim listesinde "A" seçerse "A" diğer HTML seçme listelerinde görünmez olmalıdır:

Question

HTML görüntüsü burada

fikri seçer bakınız. Kullanıcı, ortadaki Seç listesinden birini seçmeye başlasa bile, tüm listelerde dinamik olarak güncellenmelidir. Aşağıdaki kod kısmi kusurlu eksik çözümdür. Bence tekrarlayıcı. Yapmak istediğim, kullanıcı son Seçime ulaşana kadar HTML Seçim listelerinden seçeneklerin çıkarılmasını sağlamaktır, yalnızca bir seçenek kalır.
seçer vs ... "2" kimlikleri "1", var
Ben JQuery kodu aşağıdadır: büyük takdir kolay

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

Herhangi fikirler. Herhangi bir yardım için şimdiden teşekkür ederiz.

Answer 1

Bu seçenek kaldırmak yerine disabled kullanarak bir örnektir. Bu, seçimin kaldırılması veya değiştirilmesi için de çalışır. Ben zaten kendisine yendi oldum ... Ama zaten zamanın oldukça bir miktar yatırım olarak gördükleri

$('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

, burada gerçekten zaten seçili olan tüm seçenekleri (kaldıran bir çözüm daha basit hale getirmek için üç seçer düşürüldü, sadece) seçenekleri adapte nesne gerekir:

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

Enigmas gereğince

tüm Seçilen makinede tüm seçenekleri tutmak istiyorsanız burada bir yolu, Beng adlı bir çözüm üzerinde yorum ve sadece önceden seçilmiş olduğu diğer seçim listesini sıfırlamak istiyorum:

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

Görüyorum ki ona dayak yedim. İşte benim çözümüm zaten. Bununla birlikte, bu çözüm, ideal olmayan "kullanılmış" değerlerin dizisini oluşturmak için bir şey seçildiğinde her zaman bir O (n) işlemi gerektirir.

$("#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>