Esto tiene que ser simple: ¿por qué esta función de cambio no funciona con la option:selected ?
Y, ¿por qué mi state variable no se "recarga" al cambiar la opción?
var states = ["AL", "AK", "AZ", "VT"]; $('#shipping_state').on('change', function() { var state = $("#shipping_state option:selected").text(); console.log(state); jQuery("#shipping_state_field").append("<div id=\"no-ship-state\">Sorry, due to " + state + " state law, alcohol can't be shipped to a " + state + " address</div>"); if (states.includes($(this).val())) { jQuery("#no-ship-state").show(); } else { jQuery("#no-ship-state").hide(); } }); #no-ship-state { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select name="shipping_state" id="shipping_state" data-label="State / County"> <option value="">Select an option…</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="VT">Vermont</option> </select> <div id="shipping_state_field"></div> <div id="no-ship-state"></div>Estás agregando el "shipping_state_field" una y otra vez. En su lugar, recomendaría usar un div en su marcado que edite cuando sea necesario en lugar de agregar uno nuevo cada vez que desee que aparezca el texto. El siguiente ejemplo intenta mantenerse lo más cerca posible de su código original:
var states = ["AL", "IL", "MI", "MS", "UT", "VT", "NH"]; $('#shipping_state').on('change', function() { var state = jQuery("#shipping_state option:selected").text(); jQuery("#no-ship-state").html("Sorry, due to " + state + " state law, alcohol can't be shipped to a " + state + " address"); if (states.includes($(this).val())) { jQuery("#no-ship-state").show(); } else { jQuery("#no-ship-state").hide(); } }); #no-ship-state { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select name="shipping_state" id="shipping_state" data-label="State / County"> <option value="">Select an option…</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select> <div id="shipping_state_field"></div> <div id="no-ship-state"></div> De esta manera, .html() se usa para reemplazar el contenido del div en lugar de agregar uno nuevo cada vez. Aquí hay algunas referencias sobre los detalles:
https://developer.mozilla.org/en-US/docs/Web/API/Element/append
Como se menciona en los comentarios, no debe agregar el DIV cada vez que el usuario selecciona del menú desplegable, ya que esto crea ID duplicados.
Cree el DIV de forma estática y simplemente actualice el nombre del estado en él. Entonces escóndelo o muéstralo.
var states = ["AL", "AK", "AZ", "VT"]; $('#shipping_state').on('change', function() { var state = $("#shipping_state option:selected").text(); console.log(state); if (states.includes($(this).val())) { $(".state_name").text(state); jQuery("#no-ship-state").show(); } else { jQuery("#no-ship-state").hide(); } }); #no-ship-state { display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <select name="shipping_state" id="shipping_state" data-label="State / County"> <option value="">Select an option…</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="VT">Vermont</option> <option value="NY">New York</option> </select> <div id="no-ship-state">Sorry, due to <span class="state_name"></span> state law, alcohol can't be shipped to a <span class="state_name"></span> address</div>