Usare Javascript con HTML per ottenere un’opzione selezionata e visualizzare una stringa basata sul valore

Scusate se questo è stato chiesto prima, ho guardato in giro (questo sito e un altro paio) per esempi e frammenti di codice, ma nulla sembra funzionare.

Sto seguendo un corso in HTML, un compito richiede l’utilizzo di uno script per controllare un ddl e visualizzare una riga di testo in base all’opzione selezionata. Il problema è che quello che ho trovato online sembra un po ‘diverso dall’esempio fornito dal nostro insegnante (stiamo usando Dreamweaver 2015 se questo fa la differenza).

Ecco cosa sono bloccato dopo un paio d’ore di codice cannibalizzante da alcuni thread diversi.

     Hot Buns    function showDetails() { var x= document.getElementById("slctOrder"); var val= x.options[x.selectedIndex].text;  document.forms["frmOrder"]["Details"].value = val;  }   

Welcome to Hot Buns


Ham can we bee'f service?

Place an order

please select one of today's specials Last of the Mo-jicama Cheesus Is Born Burger Beets of Burden Burger Paranormal Pepper Jack-tivity Burger

Un paio di modifiche minori, ma ecco l’esempio funzionante:

aggiornamento: emissione del valore selezionato in un elemento HTML vs avviso.

aggiornamento 2: ho cambiato il codice per far corrispondere esattamente quello che hai ma ho corretto alcuni errori per farlo funzionare.

1) Hai un refuso del nome del modulo “frmOder” ma nel tuo codice hai usato “frmOrder”.

 document.forms["frmOder"]["Details"].value = val; 

2) Stai provando a selezionare l’elemento con id ma l’attributo id non esiste:

 document.getElementById("slctOrder"); 

Dovuto cambiare:

  

a:

  

3) Non è necessario per gli eventi onclick nei tag di opzione.

Il motivo per cui ho eliminato l’elemento “output” nella mia risposta originale è perché non è un tag supportato in IE. http://www.w3schools.com/tags/tag_output.asp

      Hot Buns     

Welcome to Hot Buns


Ham can we bee'f service?

Place an order

È ansible semplificare il markup (parte modificata qui) e il codice, aggiungendo un listener di eventi.

Markup (rivisto)

 

Codice

 function showDetails(event) { console.log(event); // var x = document.getElementById("slctOrder"); var x = event.srcElement;// same as above but use the event var val = x.options[x.selectedIndex].text; // no need for above, just get the text value (assumes single select) var t = event.srcElement.selectedOptions[0].text; document.getElementById("Details").value = t; } // add event listener to select var el = document.getElementById("slctOrder"); el.addEventListener("change", showDetails, false); 

Nota che POTRESTI ancora usare il nome per selezionare: (ma restituisce una raccolta quindi [0] necessario per il primo)

 document.getElementsByName("slctOrder")[0]; 

Esempio di violino con cui giocare: https://jsfiddle.net/MarkSchultheiss/j28cpsg9/