L'Altruiste : Le Javascript

Option représente une option dans un élément Select.

Compatibilité

Disponibilité

Javascript 1.0 côté client

Correspondance HTML

<option...>... </option>

Héritage

HTMLElement

Constructeur

new Option(texte, valeur, Sélection_par_défaut, sélection)

Synopsis

select.options[i]

Propriétés

Propriété	Description
defaultSelected	spécifie l'état de la sélection initiale de l'option (selected).
index	indique la position de l'option dans l'élément Select.
length	indique le nombre d'options dans l'élément Select.
selected	indique si l'option est sélectionnée.
text	représente l'étiquette de l'option (LABEL).
value	spécifie la valeur de l'option retournée lorsque le formulaire est soumis (VALUE).

Exemple [voir]

<html>
  <head>
    <title>Démonstration de Option</title>
  </head>
  <body>
    <form name="form">
      <table border="0" width="100%" height="178">
        <tr>
          <td width="35%" valign="top" align="left">
            <select name="selecteur" size="6"
                       onchange="afficheImage(this.options[this.selectedIndex].value)">
              <option value="images/javascript15.gif" selected>
                 Javascript 1.5</option>
              <option value="images/jscript.gif">
                 Javascript et VBScript</option>
              <option value="images/javascriptPro.jpg">
                 Javascript Professionnel</option>
              <option value="images/javascriptO.gif">
                 Javascript Précis & Concis</option>
              <option value="images/300astuces.gif">
                 300 astuces pour HTML et Javascript</option>
            </select>
          </td>
          <td width="65%" valign="top" align="left">
            <ilayer id="couche1" width="100%" height="178">
            <layer id="couche2" width="100%" height="178">
            <div id="couche3"></div></layer></ilayer>
          </td>
        </tr>
      </table>
    </form>
    <script language="javascript">
      var description = new Array()
        description[0]="Javascript 1.5";
        description[1]="Javascript et VBScript";
        description[2]="Javascript Professionnel";
        description[3]="Javascript Précis & Concis";
        description[4]="300 astuces pour HTML et Javascript";

      var ie4 = document.all;
      var ns6 = document.getElementById;
      var tempobj = document.form.selecteur;
      if (ie4 || ns6)
        var contenu = document.getElementById ? 
                  document.getElementById("couche3") : 
                 document.all.couche3;
      function afficheImage(image)
      {
        if (ie4 || ns6)
        {
          contenu.innerHTML = '<center>Chargement en cours...</center>';
          contenu.innerHTML = '<center><img src="'+ image + '"><br><br>'
                   + description[tempobj.options.selectedIndex] +'</center>';
        }
        else if (document.layers)
        {
          document.couche1.document.couche2.document.write(''
                  + '<center><img src="' + image + '"><br><br>'
                  + description[tempobj.options.selectedIndex] 
                  + '</center>');
          document.couche1.document.couche2.document.close()
        }
        else
          alert('Vous avez besoin de Explorer 5.x, Netscape 4.x ou plus !')
      }

      function afficheDefaut()
      {
        afficheImage(tempobj.options[tempobj.options.selectedIndex].value);
      }

      if (ie4 || ns6 || document.layers)
      {
        if (tempobj.options.selectedIndex != -1)
        {
          if (ns6)
            afficheDefaut();
          else
            window.onload = afficheDefaut;
        }
      }
    </script>
  </body>
</html>

En savoir plus :