alguien puede estar feliz de ayudarme, en mi código a continuación, estoy tratando de mostrar un div con una selección desplegable, pero ¿por qué el javascript existente no funciona?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #business { display: none; } #local { display: none; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $('#purpose').on('change', function () { if (this.value === "1") { $("#business").show(); $("#local").hide(); } else if (this.value === "2") { $("#business").hide(); $("#local").show(); } else { $("#business").hide(); $("#local").hide(); } }); </script> </head> <body> <select id='purpose'> <option value="0">Personal use</option> <option value="1">Business use</option> <option value="2">Passing on to a client</option> </select> <div id="business"> <label for="business">Business Name</label> <input type='text' class='text' name='business' value size='20' /> </div> <div id="local"> <label for="local">Local Name</label> <input type='text' class='text' name='local' value size='20' /> </div> </body> </html>el código anterior funciona bien si lo ejecuto en fiddle, pero no cuando lo ejecuto en mi computadora local, ¿alguien puede ayudarme? ¿Qué debo hacer para el problema anterior? Cualquier tipo de ayuda, gracias.
El <select id='purpose'> aún no existe cuando intenta ejecutar $('#purpose').on('change', ...) . Mueva su etiqueta <script> al final de la etiqueta <body> , o agregue un atributo defer a la etiqueta (que sigue las mejores prácticas de todos modos).
Prueba esto, solo necesitabas mover algunas cosas.
$('#purpose').on('change', function() { if (this.value === "1") { $("#business").show(); $("#local").hide(); } else if (this.value === "2") { $("#business").hide(); $("#local").show(); } else { $("#business").hide(); $("#local").hide(); } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #business { display: none; } #local { display: none; } </style> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <select id='purpose'> <option value="0">Personal use</option> <option value="1">Business use</option> <option value="2">Passing on to a client</option> </select> <div id="business"> <label for="business">Business Name</label> <input type='text' class='text' name='business' value size='20' /> </div> <div id="local"> <label for="local">Local Name</label> <input type='text' class='text' name='local' value size='20' /> </div> </body> </html>