Tengo dos listas desplegables. Necesito deshabilitar los elementos que elijo de la primera selección y los elementos debajo de él. ¿Cómo puedo hacerlo en jQuery? Podría deshabilitar el mismo valor, pero no los valores a continuación. ¿Algún cuerpo puede ayudar?
$('#seat').on('change', '.from select', function() { $('option[disabled]').prop('disabled', false); $('.station_from').each(function() { $('.stationTo').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); }); });Puedes hacer una verificación de bucle. esta no es la forma más eficiente, pero es simple. Puedes leer los comentarios en el código para entenderlo mejor
// When the value for the first drop down list changes $('#firstSelect').change(function() { // get the selected value of the first drop down list var selectedValue = $(this).val(); // we need this flag to check if we have reached the selected value in the second drop down list. we default it to false since we have not found it yet var foundOption = false; //for each option in the second drop down list $("#secondSelect option").each(function(key,value){ // enable that option $(value).prop('disabled', false); // check if the option in the second drop down list has the same value as the selected value of the first drop down list if($(value).val() == selectedValue){ // if so then set flag to true foundOption = true; } // if flag is true or in other words if we have found the option in the second drop down list with the same selected value of the first drop down list if(foundOption){ // then disable that option and every option that comes after that value $(value).prop('disabled', true); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="firstSelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <br> <br> <br> <select id="secondSelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select>Lo encontré :
$('#seat').on('change','.from select', function() { /* enable any previously disabled options */ $('option[disabled]').prop('disabled', false); /* loop over each select */ $('.station_from').each(function(){ /* for every other select, disable option which matches this this.value */ $('.stationTo').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); $('.stationTo').not(this).find('option[value="'+this.value+'"] ~ option').prop('disabled',true); }); });