0
161
VisualizaçõesObtener texto si selecciono algún valor de la secuencia de comandos de la aplicación HTML de la lista desplegable
Tengo este código para obtener texto si selecciono un valor de la lista desplegable:
<!DOCTYPE html> <html> <body> <div id="addOrderPrompt"> <center> <form> <div id="containerT0"><label for="example">Drop List:</label> <select name="exchange" id="exchange"> <option value="first" rel="firstTarget">First</option> <option value="second" rel="secondTarget">Second</option> </select> </div> <a href="https://www.google.com" target="_blank" class="firstTarget">Google</a> <a href="https://www.facebook.com" target="_blank"class="secondTarget">Facebook</a> </select> </form> </center> </div> </body> </html>Quiero ocultar enlaces. Lo muestro si selecciono algún valor de la lista desplegable. Por ejemplo, si selecciono "Primero" de la lista desplegable, quiero ver solo un enlace de Google, y si selecciono "Segundo", solo quiero ver el enlace de Facebook.
Este es mi resultado:
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Puede obtener la opción seleccionada de JavaScript usando el evento onchange y manejar la visibilidad de los enlaces usando la propiedad de display . Aquí hay un ejemplo:
function handleChange() { var userValueElement = document.getElementById("exchange"); var userValue = userValueElement.options[userValueElement.selectedIndex].text; if (userValue == "First") { document.getElementById('google').style.display = 'inline'; document.getElementById('facebook').style.display = 'none'; } else if (userValue == "Second") { document.getElementById('google').style.display = 'none'; document.getElementById('facebook').style.display = 'inline'; } } <!DOCTYPE html> <html> <body> <div id="addOrderPrompt"> <center> <form> <div id="containerT0"><label for="example">Drop List:</label> <select name="exchange" id="exchange" onchange="handleChange()"> <option value="first" rel="firstTarget">First</option> <option value="second" rel="secondTarget">Second</option> </select> </div> <a id="google" href="https://www.google.com" target="_blank" class="firstTarget">Google</a> <a id="facebook" href="https://www.facebook.com" target="_blank" class="secondTarget" style="display: none">Facebook</a> </select> </form> </center> </div> </body> </html>
·
Juan Pablo Isaza
Relatório
Responde à pergunta