Hola, quiero mostrar el siguiente div cuando se selecciona actual, por ej. cuando se selecciona la opción 1 o 2, se debe mostrar el menú desplegable de 3 y 4, y cuando se selecciona 3 o 4, se debe mostrar el menú desplegable de 5 y 6 y así sucesivamente...
Esto es lo que he hecho
$(document).ready(function () { var f = $('.abc').first().css("display","block"); f.change(function() { f.next('.abc').css("display","block"); }); }); .abc{ display:none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="abc"> <select> <option>1</option> <option>2</option> </select> </div> <div class="abc"> <select> <option>3</option> <option>4</option> </select> </div> <div class="abc"> <select> <option>5</option> <option>6</option> </select> </div> <div class="abc"> <select> <option>7</option> <option>8</option> </select> </div>Puedes hacerlo así:
$(document).ready(function() { var f = $('.abc').hide(); f.first().css("display", "block"); f.change(function() { $(this).next('.abc').css("display", "block"); }); }); Primero, desea que f sea igual a todos los .abc y no solo al primero.
En segundo lugar, necesita $(this).next('.abc') y no f.next('.abc') . Porque quieres saber qué abc se ha cambiado para saber cuál es el siguiente.
Manifestación
$(document).ready(function() { var f = $('.abc').hide(); f.first().css("display", "block"); f.change(function() { $(this).next('.abc').css("display", "block"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="abc"> <select> <option>1</option> <option>2</option> </select> </div> <div class="abc"> <select> <option>3</option> <option>4</option> </select> </div> <div class="abc"> <select> <option>5</option> <option>6</option> </select> </div> <div class="abc"> <select> <option>7</option> <option>8</option> </select> </div>