JavaScript DHTML/Form Control/List

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

Determining the Size of the List

<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>



Determining the Value or Text of the Selected Option

<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><p>
    <input type=button value="Show Current" onClick="alert(getSelectValue(this.form.songs))">
</form>
</body>
</html>



Determining the Values of Multiselection Lists

<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>



Selection List Event Handling

<HTML>
<HEAD>
<TITLE>Handling Selection List Events</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function updateOrder() {
 var orderString="";
 var n = document.diner.entries.length;
 for(i=0;i<n;++i) {
  if(document.diner.entries.options[i].selected) {
   orderString+=document.diner.entries.options[i].value+"\n"
  }
 }
 document.diner.summary.value=orderString
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="diner">
<H2 ALIGN="CENTER">The Web Diner</H2>
<P><B>Place your order:</B></P>
<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>
<P><B>You ordered: </B></P>
<P>
<TEXTAREA NAME="summary" ROWS="4" COLS="20"></TEXTAREA></P>
<P><INPUT TYPE="SUBMIT" NAME="order" VALUE="Let me have it!"></P>
</FORM>
</BODY>
</HTML>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/List&oldid=2525»