Hola, tengo código de arranque HTML:
$(document).ready(function() { $("#us-state").find('select').change(function() { var $val = $(this).val(); if ($val === 'US') { $('.us-state-select').show(); } else { $('.us-state-select').hide(); } }); }); <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="col-sm mb-5 us-state-select"> <label>USA STATE</label> <select name="order_from_address_state" class="form-select"> <option>Choose country</option> <option value="AL" name="<AL>" selected>Alabama</option> <option value="AK" name="AK">Arkansas</option> </select> </div> <div class="col-sm mb-5" id="us-state"><label>Send from country</label> <select name="order_from_address_country" class="form-select"> <option>Send from</option> <option value="US" name="US">USA</option> <option value="CA" name="CA" selected>Canada</option> </select> </div>(También disponible en JSFiddle )
Mi problema es simple. Estoy usando foreach para mostrar todos los países y estados pero... verifique jsfiddle. si se selecciona un país diferente a los EE. UU. y su carga con este país diferente, muestra div us-state-select y si hace clic en diferentes países, desaparece y funciona como se esperaba. Pero no quiero mostrar div con estados en el caso de que se cargue la página y se seleccione un país diferente al de EE. UU. ¿Como hacer eso? es obvio en el violín, seleccioné Canadá y en la carga de la página hay div con estados y cuando hago clic en un valor diferente, por ejemplo: enviar desde el cuadro del país, los estados desaparecen y funciona como se esperaba entonces. Por favor, ¿puedes darme algún consejo? Soy novato en jquery, gracias.
Cambie su JS para que sea así: básicamente estoy verificando esta lógica una vez que la página está lista y también agregué algunos refactores en su código para ayudar a la legibilidad
$(document).ready(function() { const checkValues = () => { var value = $("#us-state").find('select').val(); console.log(value) if(value === 'US'){ $('.us-state-select').show(); }else{ $('.us-state-select').hide(); } } $("#us-state").ready(checkValues); $("#us-state").find('select').change(checkValues); });