JQuery में अन्य चयन विकल्पों के आधार पर गतिशील रूप से चुनिंदा विकल्पों को कैसे बदला जाए?

Question

कृपया देखें एचटीएमएल की छवि का चयन करता है

विचार यहाँ: उपयोगकर्ता पहले एचटीएमएल चयन सूची में 'ए' चुनता है, 'ए' अन्य HTML चयन सूचियों में प्रदर्शित नहीं करना चाहिए। यह सभी सूचियों में गतिशील रूप से अपडेट किया जाना चाहिए भले ही उपयोगकर्ता मध्य में चयन सूची में से किसी एक में चयन करना शुरू कर दे। नीचे दिया गया कोड आंशिक अपूर्ण अपूर्ण समाधान है। मुझे लगता है कि यह दोहराया गया है। मैं क्या करना चाहता हूं कि एचटीएमएल सिलेक्ट सूचियों से विकल्प कम करना जारी रखें जब तक कि उपयोगकर्ता अंतिम चयन तक नहीं पहुंच जाता, केवल एक विकल्प रहता है।
चयन आईडी "1", "2" आदि ... है
मैं निम्नलिखित 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> 

कोई भी विचार है कि आसान बहुत सराहना की जाएगी कर रहे हैं। किसी भी सहायता के लिए अग्रिम रूप से धन्यवाद।

Answer 1

विकल्प को हटाने के बजाय disabled का उपयोग करके एक उदाहरण दिया गया है। यह एक विकल्प को अचयनित या बदलने के लिए भी काम करता है।

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

मैं देख रहा हूँ मैं पहले से ही यह करने के लिए हरा किया गया है ... लेकिन मैं पहले से ही समय की काफी राशि का निवेश किया के रूप में, यहाँ एक समाधान है कि वास्तव में सभी विकल्प है कि पहले से चयनित हैं (को हटा है तीन चयन करने के लिए कम यह सरल बनाने के लिए, बस विकल्प अनुकूलन) वस्तु की जरूरत है:

$(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 के अनुसार बेंग के समाधान पर टिप्पणी, यहाँ एक तरह से आप सभी चयन में सभी विकल्पों रखना चाहते हैं और सिर्फ अन्य चुनिंदा सूची जहां यह पहले से ही चयनित किया गया है रीसेट करना चाहते हैं:

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

मुझे लगता है कि मुझे इसे पीटा गया है। वैसे भी मेरा समाधान यहाँ है।

हालांकि, इस समाधान के लिए प्रत्येक बार "प्रयुक्त" मानों की सरणी उत्पन्न करने के लिए कुछ चुना जाता है, जो आदर्श नहीं है।

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