Come disattivare le opzioni selezionate precedenti quando si seleziona l'opzione dalla prima selezione

Question

Ho due elementi di selezione. entrambi selezionano gli stessi valori. quando seleziono l'opzione dalla casella di selezione 1, dovrebbe disabilitare tutte le opzioni di selezione precedenti dalla seconda casella di selezione. Supponiamo ho questo selezionare:

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

Se seleziono valore 3 dalla scatola S1 si deve disattivare tutte le opzioni precedenti da selezionare s2. se seleziono il valore 2 da s1 dovrebbe disabilitare tutti i valori precedenti in s2.

Nota: Non dovrebbe disabilitare i valori successivi, solo quelli precedenti. Sto cercando una soluzione jquery.

Answer 1

Utilizzare :lt per selezionare elementi con un indice minore di quello specificato.

.index() restituirà la posizione dell'elemento dall'elemento corrispondente.

.not() escluderà l'elemento specificato dagli elementi restituiti.

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

Prova sotto il codice Se è utile per voi

$(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); 
     } 
    }); 
});});