Esperti di java script

Fai una domanda Tutte le categorie
tony883
tony883
13 ott 2006, 22:04
devo inserire in una pagina un menù a tendina tramite l'ellemento Select di un form html....la pagina deve poi mostrare in una finestra di dialogo la voce che l'utente ha scelto dall'elenco....

mi aiutate non so da dove incominciare sto cominciando ad arire il libro solo ora
Risposte
anonymous_be1147
anonymous_be1147
13 ott 2006, 20:53
Non conosco molto JavaScript, prova a vedere se così può andare

<html>

<head>
  <title>Sistemi Operativi</title>
  <script type="text/javascript">

    function selectOnChange() {
	  var os = document.getElementById("sysop");
	  alert("Hai scelto " + os.options[os.selectedIndex].text);
    }

  </script>
</head>

<body>
  <form>
    Sistema operativo preferito:
    <select id="sysop" onchange="selectOnChange()">
      <option value="Amoeba">Amoeba
      <option value="FreeBSD">FreeBSD
      <option value="Mac OSX">Mac OSX
      <option value="Linux">Linux
      <option value="Minix 3">Minix 3
      <option value="OpenBSD">OpenBSD
      <option value="NetBSD">NetBSD
      <option value="Sun Solaris">Solaris
      <option value="MS-Windows" selected> MS-Windows
    </select>
  </form>
</body>

</html>
tony883
tony883
13 ott 2006, 21:15
mi dai una spiegazione su queste piccole righe
anonymous_be1147
anonymous_be1147
13 ott 2006, 22:09
Senz'altro. Aggiungo un breve commento alle due parti più importanti:

    <select id="sysop" onchange="selectOnChange()">
      <!--
        Innanzitutto assegno un "id" all'elemento HTML <select> con il quale posso far riferimento ad esso
        nel codice JavaScript.
        Il valore dell'attributo "id", come sai, è arbitrario. In questo esempio ho scelto "sysop".

        L'elemento <select> ha poi anche l'attributo "onchange". Il valore di questo indica in genere una funzione
        (es. JavaScript) che verrà richiamata ogni volta che l'utente seleziona una nuova voce dall'elenco.
        In questo caso gli ho assegnato la funzione selectOnChange(), che avevo precedentemente definito.
      -->
    </select>



    function selectOnChange() {
          /*
           * Assegno alla variabile os l'elemento del documento avente id "sysop", tramite la funzione DOM/JavaScript
           *  getElementById(), che restituisce appunto l'elemento della pagina HTML avente l'id passatogli come argomento.
           */
          var os = document.getElementById("sysop");

          /*
           * Visualizzo allora tramite una dialog box (funzione alert() ) la voce selezionata dall'utente.
           *
           * L'elemento (variabile) os ha la proprietà options, che contiene un array di oggetti Option,
           * che sono le voci/opzioni offerte all'utente tramite i tag <option>.
           * Essendo la proprietà os.options un array, ogni elemento è selezionabile tramite un indice.
           * Fortunatamente l'oggetto assegnato a os ha anche una proprietà di nome os.selectedIndex che contiene proprio
           * l'indice dell'ultimo oggetto/opzione selezionato dall'utente, e quindi accedo a questo oggetto tramite
           * os.options[os.selectedIndex].
           *
           * Ora ho l'oggetto Option (che non è altro che uno dei tag HTML <option> della pagina) selezionato dall'utente
           * o voglio/posso visualizzare nella dialog box il suo testo leggendo la proprietà text. E' possibile anche stampare
           * il valore di tale oggetto tramite os.options[os.selectedIndex].value.
           * In tal caso verrebbe visualizzato il contenuto dell'attributo "value" nel tag HTML <option>.
           */
          alert("Hai scelto " + os.options[os.selectedIndex].text);
    }
tony883
tony883
13 ott 2006, 22:27
grazie mille...mi sei stato di grande aiuto
tony883
tony883
14 ott 2006, 13:28
Rispondi
Per rispondere a questa discussione devi prima effettuare il login.