JavaScript DHTML/Form Control/List

Материал из Web эксперт
Перейти к: навигация, поиск

Determining the Size of the List

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> 

    function moveon() {
       var urlAddress = "";
       urlAddress = document.forms[0].Edit1.value;
       parent.frames[1].location = urlAddress;
       document.forms[0].Edit2.value = parent.frames[1].history.length;
     }

</SCRIPT> </HEAD>

<BODY> <FORM> <INPUT type="text" name="Edit1"> <INPUT type="button" value="move" onClick="moveon()"> <INPUT type="text" name="Edit2"> </FORM> </BODY> </HTML> 

      </source>


Determining the Value or Text of the Selected Option

   <source lang="html4strict">

<html> <head> <script language = "JavaScript"> 

    function getSelectValue(selectObject) {
         return selectObject.options[selectObject.selectedIndex].value
    }

</script> </head> <body> 

   <form name="form1">
   Songs: 
   <select NAME="songs" SIZE=1>
       <option VALUE="AA">AA</option>
       <option VALUE="BB">BB</option>
       <option VALUE="CC">CC</option>
       <option VALUE="DD">DD</option>
       <option VALUE="EE">EE</option>
       <option VALUE="FF">FF</option>
</SELECT>

<input type=button value="Show Current" onClick="alert(getSelectValue(this.form.songs))"> </form> </body> </html> </source>

Determining the Values of Multiselection Lists

   <source lang="html4strict">

<html> <head> <script language = "JavaScript"> 

    function showSelection(objectName) {
         var list = ""
         for (var i=0; i<objectName.length; i++) {
              if (objectName.options[i].selected) {
                   list += objectName.options[i].text + "<p>"
              }
         }
         alert(list)
    }

</script> </head> <body> 

   <form name="form1">
     Pick Your Favorite Songs From the List:<p>
       <select NAME="songs" SIZE=5 MULTIPLE>
           <option>AA</option>
           <option>B</option>
           <option>C</option>
           <option>D</option>
           <option>E</option>
           <option>F</option>
           <option>G</option>
           <option>H</option>
           <option>I</option>
           <option>J</option>
       </SELECT><p>
     <input type=button value="Show Selection" onClick="showSelection(this.form.songs)">
   </form>

</body> </html> 

      </source>


Selection List Event Handling

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Handling Selection List Events</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY> <FORM NAME="diner">

The Web Diner

<P>Place your order:

<SELECT NAME="entries" SIZE="4" MULTIPLE="MULTIPLE" ONCHANGE="updateOrder()"> <OPTION VALUE="Hamburger">A</OPTION> <OPTION VALUE="Hot Dog">B</OPTION> <OPTION VALUE="Chicken Sandwich">C</OPTION> <OPTION VALUE="French Fries">D</OPTION> <OPTION VALUE="Onion Rings">E</OPTION> <OPTION VALUE="Soda">F</OPTION> <OPTION VALUE="Milk Shake">G</OPTION> <OPTION VALUE="Coffee">H</OPTION></SELECT>

You ordered:

<TEXTAREA NAME="summary" ROWS="4" COLS="20"></TEXTAREA>

<INPUT TYPE="SUBMIT" NAME="order" VALUE="Let me have it!">

</FORM> </BODY> </HTML> 

      </source>
Источник — «http://www.wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/List&oldid=2525»