पहले चयनित विकल्पों को अक्षम करने के लिए पहले चयनित विकल्प को कैसे अक्षम करें

Question

मेरे पास दो चुनिंदा तत्व हैं। दोनों का चयन एक ही मूल्य है। जब मैं 1 चयन बॉक्स से विकल्प का चयन करता हूं तो इसे दूसरे चयन बॉक्स से पिछले सभी चयन विकल्पों को अक्षम करना चाहिए। की मैं इस का चयन किया है लगता है:

<select id="s1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select> 

    <select id="s2"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select> 

अगर मैं एस 1 बॉक्स के मान 3 चयन यह s2 चयन से सभी पिछले विकल्प अक्षम करना चाहिए। अगर मैं एस 1 से मान 2 का चयन करता हूं तो इसे एस 2 में पिछले सभी मानों को अक्षम करना चाहिए।

नोट: इसे अगले मानों को अक्षम नहीं करना चाहिए, केवल पिछले वाले। मैं jquery समाधान ढूंढ रहा हूं।

Answer 1

निर्दिष्ट से कम सूचकांक वाले तत्वों का चयन करने के लिए :lt का उपयोग करें।

.index() मिलान किए गए तत्व से तत्व की स्थिति वापस कर देगा।

.not() लौटा तत्वों से निर्दिष्ट तत्व को बाहर कर देगा।

$('select').change(function() { 
 
    $('select option').prop('disabled', false); 
 
    var index = $(this).find('option:selected').index(); 
 
    $('select').not(this).find('option:lt(' + index + ')').prop('disabled', true); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select id="s1"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 

 
<select id="s2"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select>

Fiddle here

Answer 2

कोड के नीचे का प्रयास करें यदि यह आप

$(document).ready(function() { 
$("#s1").change(function() { 
    var optVal = $(this).val(); 
    $("#s2 option").each(function() { 
     $(this).prop('disabled', false); 
     if (optVal > $(this).val()) { 
      $(this).prop('disabled', true); 
     } 
    }); 
});});