JavaScript DHTML/Form Control/Option Select ComboBox

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

Содержание

Add an option to select

   <source lang="html4strict">

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

   function function1() {
       var newOption = document.createElement("<option value="TOYOTA">");
       document.all.mySelect.options.add(newOption);
       newOption.innerText = "Toyota";
   }
   function function2() {
       document.all.mySelect.options.remove(0);
   }

</script> <select id="mySelect"> 

   <option value="A">A</option>
   <option value="B">B</option>
   <option value="C">C</option>

</select> <input type="button" value="Add" onclick="function1();"> <input type="button" value="Remove" onclick="function2();"> </body> </html> 



 </source>


Add or remove options from select form control

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function butRemoveWed_onclick() { 

  if (document.form1.theDay.options[2].text == "AAA") 
  {
     document.form1.theDay.options[2] = null;
  } 
  else 
  {
     alert("There is no AAA here!");
  }

} function butAddWed_onclick() { 

     var i;
     var days = document.form1.theDay;
     var lastoption = new Option();
     days.options[6] = lastoption;
   
     for (i = 6;i > 2; i--)
     {
       days.options[i].text = days.options[i - 1].text;
       days.options[i].value = days.options[i - 1].value;
     }
     var option = new Option("AAA",2);
     days.options[2] = option;

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1> <SELECT NAME=theDay SIZE=5> 

  <OPTION VALUE=0 SELECTED>111
  <OPTION VALUE=1>222
  <OPTION VALUE=2>AAA
  <OPTION VALUE=3>333
  <OPTION VALUE=4>444
  <OPTION VALUE=5>555
  <OPTION VALUE=6>666

</SELECT>
<INPUT TYPE="button" 

      VALUE="Remove AAA" 
      NAME=butRemoveWed 
      onclick="butRemoveWed_onclick()">

<INPUT TYPE="button" 

      VALUE="Add AAA" 
      NAME=butAddWed 
      onclick="butAddWed_onclick()">


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


 </source>


Auto Linked Option Listbox without button

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>multiselect.html</TITLE> <SCRIPT>

</SCRIPT> </HEAD> <BODY> <FORM NAME="Lists"> 

     Language
     

     <SELECT NAME="Languages" SIZE="2" onChange="updateList(this.form);">
     <OPTION>English
     <OPTION>Spanish
     </SELECT>
     



     Group
     

     <SELECT NAME="Groups" SIZE="3" onChange="updateList(this.form);">
     <OPTION>Numbers
     <OPTION>Days
     <OPTION>Zodiac
     </SELECT>
     



     Translation
     

     <SELECT NAME="Translation" SIZE="12">
     <OPTION>
     <OPTION>
     <OPTION>
     </SELECT>

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



 </source>


Change background

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Change background</TITLE> </HEAD> <SCRIPT>

</SCRIPT> <BODY STYLE="font-family:Arial"> Changing Background Colors 

<FORM>
  <SELECT SIZE="8" onChange="bgChange(this);">
  <OPTION>Red
  <OPTION>Orange
  <OPTION>Yellow
  <OPTION>Green
  <OPTION>Blue
  <OPTION>Indigo
  <OPTION>Violet
  <OPTION>White
  </SELECT>
</FORM>

</BODY> </HTML> 



 </source>


Change the option text

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function changeText(){ 

   var x=document.getElementById("aSelectControl")
   x.options[x.selectedIndex].text="Melon"

} </script> </head> <body> <form> Select your favorite language: <select id="aSelectControl"> 

 <option>Java</option>
 <option>Perl</option>
 <option>PHP</option>

</select>

<input type="button" onclick="changeText()" value="Change text of selected language"> </form> </body> </html> 



 </source>


Change the size of a dropdown list (ComboBox)

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function formAction(){ 

   var x=document.getElementById("mySelect")
   x.size="3"

} </script> </head> <body> <form> <select id="mySelect"> 

 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>

</select> <input type="button" onclick="formAction()" value="Change size of list"> </form> </body> </html> 




 </source>


Changing Select Element Content (two Combobox)

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

 "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

<html> <head> <title>Recipe 8.13</title> <style rel="stylesheet" id="mainStyle" type="text/css"> html {background-color:#cccccc} body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px; 

   margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}

h1 {text-align:right; font-size:1.5em; font-weight:bold} h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline} .buttons {margin-top:10px} </style> <script type="text/javascript"> var regiondb = new Object() regiondb["africa"] = [{value:"102", text:"Cairo"}, 

                     {value:"88", text:"Lagos"},
                     {value:"80", text:"Nairobi"},
                     {value:"55", text:"Pretoria"}];

regiondb["asia"] = [{value:"30", text:"Ankara"}, 

                   {value:"21", text:"Bangkok"},
                   {value:"49", text:"Beijing"},
                   {value:"76", text:"New Delhi"},
                   {value:"14", text:"Tokyo"}];

regiondb["australia"] = [{value:"64", text:"Suva"}, 

                         {value:"12", text:"Sydney"}];

regiondb["europe"] = [{value:"11", text:"Athens"}, 

                     {value:"35", text:"Frankfurt"},
                     {value:"3", text:"London"},
                     {value:"15", text:"Madrid"},
                     {value:"1", text:"Paris"},
                     {value:"10", text:"Rome"},
                     {value:"6", text:"Stockholm"},
                     {value:"97", text:"St. Petersburg"}];

regiondb["noamer"] = [{value:"73", text:"Dallas"}, 

                     {value:"71", text:"Los Angeles"},
                     {value:"5", text:"New York"},
                     {value:"37", text:"Toronto"}];

regiondb["soamer"] = [{value:"65", text:"Buenos Aires"}, 

                     {value:"31", text:"Caracas"},
                     {value:"66", text:"Rio di Janeiro"}];

function setCities(chooser) { 

   var newElem;
   var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
   var cityChooser = chooser.form.elements["city"];
   while (cityChooser.options.length) {
       cityChooser.remove(0);
   }
   var choice = chooser.options[chooser.selectedIndex].value;
   var db = regiondb[choice];
   newElem = document.createElement("option");
   newElem.text = "Choose a City:";
   newElem.value = "";
   cityChooser.add(newElem, where);
   if (choice != "") {
       for (var i = 0; i < db.length; i++) {
           newElem = document.createElement("option");
           newElem.text = db[i].text;
           newElem.value = db[i].value;
           cityChooser.add(newElem, where);
       }
   }

} /********** 

 DOM LEVEL 0 ALTERNATE
**********

function setCities(chooser) { 

   var cityChooser = chooser.form.elements["city"];
   // empty previous settings
   cityChooser.options.length = 0;
   // get chosen value to act as index to regiondb hash table
   var choice = chooser.options[chooser.selectedIndex].value;
   var db = regiondb[choice];
   // insert default first item
   cityChooser.options[0] = new Option("Choose a City:", "", true, false);
   if (choice != "") {
       // loop through array of the hash table entry, and populate options
       for (var i = 0; i < db.length; i++) {
           cityChooser.options[i + 1] = new Option(db[i].text, db[i].value);
       }
   }

}

                    • /

</script> </head> <body>

Changing Select Element Content

<form name="dealers" ...> ... Submit Request to: <select name="continent" onchange="setCities(this)"> 

   <option value="" selected>Choose a Region:</option>
   <option value="africa">Africa</option>
   <option value="asia">Asia</option>
   <option value="australia">Australia/Pacific</option>
   <option value="europe">Europe</option>
   <option value="noamer">North America</option>
   <option value="soamer">South America</option>

</select>  <select name="city"> 

   <option value="" selected>Choose a City:</option>

</select> ... </form> </body> </html> 



 </source>


Click button to navigate to selected url from form select control

   <source lang="html4strict">

<HTML> <BODY> <FORM name="f1"> <SELECT name="s1"> <OPTION SELECTED value="http://www.wbex.ru">wbex.ru <OPTION value="http://www.google.ru">Google <OPTION value="http://www.msn.ru">msn <OPTION value="http://www.perl.ru">Perl.ru <OPTION value="http://www.php.net">Php.net </SELECT> <INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value"> </FORM>

<FORM name="f2"> <SELECT name="s2" onChange="window.location=document.f2.s2.options[document.f2.s2.selectedIndex].value"> <OPTION SELECTED value="http://www.wbex.ru">wbex.ru <OPTION value="http://www.google.ru">Google <OPTION value="http://www.msn.ru">msn <OPTION value="http://www.perl.ru">Perl.ru <OPTION value="http://www.php.net">Php.net </SELECT> </FORM> </BODY> </HTML> </source>

ComboBox set value to TextField

   <source lang="html4strict">

<html> <head> <title>test</title> <script language="JavaScript"> function PrintValues(){ 

 var myString = document.mainform.file.value
 var myStringLength = myString.length
 var Comma = myString.lastIndexOf(",")
 var SufNumChars = Comma + 1
 document.mainform.result.value=("");
 for(i=0; i<Comma; i++) 
 document.mainform.result.value+=(myString.charAt(i));
 document.mainform.result.value+=(" ");
 for(i=SufNumChars; i<myStringLength; i++) 
 document.mainform.result.value+=(myString.charAt(i));

} </script>

</head> <body> <form name="mainform"> <p> <select name="file" size="1" onchange="PrintValues();" target="_parent._top" 

       onmouseclick="this.focus()">
 <option value="Joe,Yin">First Option</option>
 <option value="Hi,Me">Second Option</option>

</select> <input name="result"> </form> </body> </html> 



 </source>


Cycling through a Multiple-Selection List

   <source lang="html4strict">

<html> <head> <title>Accessories List</title> <script type="text/javascript"> function seeList(form) { 

   var result = ""; 
   for (var i = 0; i < form.accList.length; i++) { 
       if (form.accList.options[i].selected) { 
           result += "\n " + form.accList.options[i].text; 
       } 
   } 
   alert("You have selected:" + result);

} </script> </head> <body> <form> <select name="accList" size="9" multiple="multiple"> <option selected="selected">A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option>

</select>

<input type="button" value="View" onclick="seeList(this.form)" />

</form> </body> </html> 


 </source>


Demonstrates select object used as a multi-line list box

   <source lang="html4strict">

<html> <head> <script> function changeColor(){ 

 var theSelect = document.myForm.selColor;
 var selectedOne = theSelect[theSelect.selectedIndex];
 var theColor = selectedOne.value;
 document.bgColor = theColor;
 var colorList = "";
 var i = 0;
 for (i = 0; i < theSelect.length; i++){
   selectedOne = theSelect.options[i];
   if (selectedOne.selected == true){
     colorList += selectedOne.value + "\n";
   }
 }
 document.myForm.txtOutput.value = colorList;

} </script> </head> <body> Color Chooser <form name = "myForm"> <select name = selColor multiple size = 3> 

 <option value = red>red</option>
 <option value = orange>orange</option>
 <option value = yellow>yellow</option>

</select> <input type = "button" 

      value = "change color"
      onClick = "changeColor()">

<textarea name = txtOutput 

         rows = 10
         cols = 40>

</textarea> </form> </body> </html> 


 </source>


Disable and enable a dropdown list (combobox)

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function makeDisable(){ 

   var x=document.getElementById("mySelect")
   x.disabled=true

} function makeEnable(){ 

   var x=document.getElementById("mySelect")
   x.disabled=false

} </script> </head> <body> <form> <select id="mySelect"> 

 <option>Apple</option>
 <option>Banana</option>
 <option>Orange</option>

</select> <input type="button" onclick="makeDisable()" value="Disable list"> <input type="button" onclick="makeEnable()" value="Enable list"> </form> </body> </html> 



 </source>


Disable or enable an option

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function makeDisable(){ 

   var x=document.getElementById("aSelectControl")
   x.disabled=true

} function makeEnable(){ 

   var x=document.getElementById("aSelectControl")
   x.disabled=false

} </script> </head> <body> <form> <select id="aSelectControl"> 

 <option>Java</option>
 <option>PHP</option>
 <option>Perl</option>

</select> <input type="button" onclick="makeDisable()" value="Disable list"> <input type="button" onclick="makeEnable()" value="Enable list"> </form> </body> </html> 



 </source>


Dropdown list (combobox) in a form

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function put(){ 

   txt=document.forms[0].myList.options[document.forms[0].myList.selectedIndex].text
   document.forms[0].favorite.value=txt

} </script> </head> <body> <form> Select your favorite browser: <select name="myList" onchange="put()"> 

 <option>Internet Explorer</option>
 <option>Netscape</option>
 <option>Opera</option>

</select>

Your favorite browser is: <input type="text" name="favorite" size="20"> </form> </body> </html> 



 </source>


dropdown list (combobox) in form 2

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> 

   function put(){
       option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
       txt=document.forms[0].number.value
       txt=txt + option
       document.forms[0].number.value=txt

} </script> </head> <body> <form> Select numbers:
<select name="dropdown"> 

 <option>0</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 <option>6</option>
 <option>7</option>
 <option>8</option>
 <option>9</option>

</select> <input type="button" onclick="put()" value=">>>"> <input type="text" name="number" size="20"> </form> </body> </html> 




 </source>


Drop-down Redirect - No Submit button

   <source lang="html4strict">

<html> <head> <title>Redirect menu</title> <script language="JavaScript"> function loadPage(list) { 

 location.href=list.options[list.selectedIndex].value

} </script>

</head> <body> <form> <select name="file" size="1" 

 onchange="loadPage(this.form.elements[0])"
 target="_parent._top"
 onmouseclick="this.focus()"
 style="background-color:#ffffff">
 <option value>Select Page</option>
 <option value> </option>
 <option value="http://www.wbex.ru">wbex.ru</option>
 <option value="http://www.apple.ru">Stevie</option>

</select ></form> </body> </html> 



 </source>


Drop-down Redirect - Submit

   <source lang="html4strict">

<html> <head> <title>test</title> <script language="JavaScript">

</script>

</head> <body> <form name="redirect"> <select name="selection"> 

 <option value="http://www.wbex.ru">Hi</option>
 <option value="http://www.wbex.ru">Bye</option>

</select> <input type=button value="Go!" onClick="WinOpen();"> </form> </body> </html> 



 </source>


Get changed selection from form select

   <source lang="html4strict">

<html> <head> <title>Color Chooser</title> <script> function changeColor(){ 

 var theSelect = document.myForm.selColor;
 var selectedOne = theSelect[theSelect.selectedIndex];
 var theColor = selectedOne.value;
 document.bgColor = theColor;

}</script> </head> <body> Color Chooser <form name = "myForm"> <select name = selColor> 

 <option value = red>red</option>
 <option value = green>green</option>
 <option value = blue>blue</option>

</select>
<input type = "button" 

      value = "change color"
      onClick = "changeColor()">

</form> </body> </html> 


 </source>


Grouped selection control on change event

   <source lang="html4strict">

<html> <head> <title>Color Changer 3</title> <script type="text/javascript"> function seeColor(list) { 

   var newColor = (list.options[list.selectedIndex].value); 
   if (newColor) { 
       document.bgColor = newColor; 
   }

} </script> </head> <body onload="seeColor(document.getElementById("colorsList"))"> <form> <select name="colorsList" id="colorsList" onchange="seeColor(this)"> <optgroup id="optGrp1" label="Reds"> <option value="#ff9999">Light Red</option> <option value="#ff3366">Medium Red</option> <option value="#ff0000">Bright Red</option> <option value="#660000">Dark Red</option> </optgroup> <optgroup id="optGrp2" label="Greens"> <option value="#ccff66">Light Green</option> <option value="#99ff33">Medium Green</option> <option value="#00ff00">Bright Green</option> <option value="#006600">Dark Green</option> </optgroup> <optgroup id="optGrp3" label="Blues"> <option value="#ccffff">Light Blue</option> <option value="#66ccff">Medium Blue</option> <option value="#0000ff">Bright Blue</option> <option value="#000066">Dark Blue</option> </optgroup> </select></p> </form> </body> </html> 


 </source>


"index" Example

   <source lang="html4strict">

<html> <body> <select id="mySelect" size=5> 

  <option id="o1">1</option>
  <option id="o2">2</option>
  <option id="o3">3</option>
  <option id="o4">4</option>
  <option id="o5">5</option>

</select> <input type="button" value="1" onClick="function1(o1);"> <input type="button" value="2" onClick="function1(o2);"> <input type="button" value="3" onClick="function1(o3);"> <input type="button" value="4" onClick="function1(o4);"> <input type="button" value="5" onClick="function1(o5);"> <script language="JavaScript"> 

   function function1(elem) {
       alert("Index: "+ elem.index);
   }

</script> </body> </html> 



 </source>


Is Select a select-multiple

   <source lang="html4strict">

<html> <body> <select id="mySelect" size="5" multiple="select-multiple"> 

   <option>Item 1</option>
   <option>Item 2</option>
   <option>Item 3</option>
   <option>Item 4</option>
   <option>Item 5</option>

</select> <button onclick="alert(mySelect.multiple);">Multiple</button> </body> </html> 



 </source>


Linked ComboBox (option) Country =- province

   <source lang="html4strict">

<html> <head> <title>Create Form Elements</title> <script language="javascript">

</script>

</head> <body> <form name="newforms"> Choose Country: <select name="country" onChange="CreateProvince()"> 

 <option value="">Choose Country</a>
 <option value="Canada">Canada</a>
 <option value="USA">USA</a>

</select> <select name="SelectProvState"> 

 <option value="1">Choose province/state</option>

</select> </form> </body> </html> 




 </source>


Menu(Option) Generator

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Qiksearch MenuGen</title> <style type="text/css"> .link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal} .link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal} </style> </head> <body bgcolor="#FFFFFF" onload="this.document.qiksearch.select_items.selectedIndex = 4">

Qiksearch     MenuGen

<script language="javascript"> // Location of this script: // http://www.qiksearch.ru/javascripts/menugen.htm //********************************************* //* Qiksearch MenuGen * //* Javascript Drop-Down Menu Creator * //* (c) Premshree Pillai, * //* http://www.qiksearch.ru * //* E-mail : premshree@hotmail.ru * //* Created on 03/14/02 * //* Use the script freely as long as * //* credits are maintained * //* Visit www.qiksearch.ru/javascripts.htm * //* for more FREE scripts * //********************************************* var no_options;

document.write("
"); document.write("
<a href="javascript:about()">About</a><a href="javascript:help()">Help</a><a href="mailto:premshree@hotmail.ru">Contact</a><a href="http://www.qiksearch.ru">Qiksearch</a>
");

document.write("<form name="qiksearch">"); if(navigator.appName=="Microsoft Internet Explorer") { 

document.write("Display <select name="select_items" onchange="javascript:showItems(this.document.qiksearch.select_items.value)" style="font-size:8pt">");
for(var i=1; i<=30; i++)
{
 document.write("<option value="" + i + "">" + i + "</option>");
}
this.document.qiksearch.select_items.selectedIndex = 4;
document.write("</select> links.

");

} document.write("Combo Caption :

"); document.write("<input type="text" value="Select" name="combo_caption" size="30" style="height:20; border:1 solid #000000">"); document.write("

Combo Items :

");

document.write("
");

for(var i=1; i<=5; i++) { 

document.write("Option : <input type="text" size="12" name="option" + i + "" style="height:20; border:1 solid #000000"> Link to : <input type="file" name="linkto" + i + "" size="15" style="height:20; border:1 solid #000000">
");

}

document.write("
"); document.write("
<input type="button" name="qiksearch_submit" value="Make My Code" onclick="display()" style="font-family:verdana,arial,helvetica; font-size:8pt; height:20; width:48%; background:#EFEFEF; border:1 solid #808080; cursor:hand"> <input type="reset" onclick="javascript:location.reload();" style="font-family:verdana,arial,helvetica; font-size:8pt; height:20; width:48%; background:#EFEFEF; border:1 solid #808080; cursor:hand">
");

document.write("
© 2002 <a href="mailto:premshree@hotmail.ru">Premshree Pillai</a>. All rights reserved.</form>");

document.write("
");

function showItems(n) { 

var item_disp = "";
for(var i=0; i<n; i++)
{
 item_disp += "Option : <input type="text" size="12" name="option" + (i+1) + "" style="height:20; border:1 solid #000000"> Link to : <input type="file" name="linkto" + (i+1) + "" size="15" style="height:20; border:1 solid #000000">
";
}
no_options=n;
this.document.all.items.innerHTML = item_disp;

} if(navigator.appName=="Microsoft Internet Explorer") { 

no_options = this.document.qiksearch.select_items.value;

} else { 

no_options = 5;

} function display() { 

  DispWin=window.open("","NewWin",
  "toolbar=no,status=no,width=500,height=375")
  message="<!--Made with Qiksearch MenuGen-->";
  message += "
<script language="javascript" type="text/javascript">";
  message += "
function go()";
  message += "
{";
  message += "
 if (document.selecter.select1.options[document.selecter.select1.selectedIndex].value != "none")";
  message += "
 {";
  message += "
  location = document.selecter.select1.options[document.selecter.select1.selectedIndex].value";
  message += "
 }";
  message += "
}";
  message += "
</script>";
  message += "
";
  message += "
<script language="JavaScript" type="text/javascript">";
  message += "
document.write("<form name="selecter"><select name="select1">");";
  message += "
document.write("<option value=none>" + this.document.qiksearch.rubo_caption.value + "</option>");";
  message += "
document.write("<option value=none>--------------------</option>");";
   for(var i=1; i<=no_options; i++)
   {
    message += "
document.write("<option value="" + eval("this.document.qiksearch.linkto" + i + ".value") + "">" + eval("this.document.qiksearch.option" + i + ".value") + "</option>");";
   }
  message += "
document.write("</select>");";
  message += "
document.write("<input type="button" value="Go" onclick="go()">");";
  message += "
document.write("</form>");";
  message += "
</script>";
  message += "
<!-- Download Qiksearch MenuGen from http://www.qiksearch.ru/javascripts/menugen.htm -->";
  DispWin.document.write(message);

} function about() { 

window.alert("Qiksearch MenuGen is a simple and handy tool using which you can create Javascript drop-down navigation Menus with ease. Qiksearch MenuGen, (c) 2002 Premshree Pillai. For updates visit Qiksearch at http://www.qiksearch.ru. Mail me at premshree@hotmail.ru");

} function help() { 

window.alert("To use Qiksearch MenuGen, first select the number of Items you want in the menu. The default is 5. Then select the caption that will appear in the menu. Default is "Select". Then fill in the details of the Items. "Option" is the text that will appear when you pull the drop-down menu. "Link to" is the link to which that particular "Option" will point to. You may type your own link/URL or browse through to link to a local file. After you are done with all this, press the "Make My Code" Button. A new window will open, with the code you require. Press CTRL+A or right click and Select All, then copy the text and paste it wherever you require on your web page.");

} </script> </body> </html> 



 </source>


Methods and Properties of the Select Object

   <source lang="html4strict">

Method blur() Removes the focus from the select box. focus() Gives the focus to the select box. handleEvent() Invokes the handler for the event specified; Property form Returns the entire form the select box is in. length Returns the number of options in the select box. name Returns the name of this select box, specified by the name attribute. options Returns an array containing each of the items in the select box. selectedIndex Returns an integer specifying the indexed location of the selected option in the select box. type Returns the type of this select box specified by the type attribute. 



 </source>


Modifying OPTGROUP Element Labels

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Color Changer 3</TITLE> <SCRIPT LANGUAGE="JavaScript"> var regularLabels = ["Reds","Greens","Blues"] var naturalLabels = ["AA","VV","BB"] function setRegularLabels(list) { 

   var optGrps = list.getElementsByTagName("OPTGROUP")
   for (var i = 0; i < optGrps.length; i++) {
       optGrps[i].label = regularLabels[i]
   }

} function setNaturalLabels(list) { 

   var optGrps = list.getElementsByTagName("OPTGROUP")
   for (var i = 0; i < optGrps.length; i++) {
      optGrps[i].label = naturalLabels[i]
   }

} function seeColor(list) { 

   var newColor = (list.options[list.selectedIndex].value)
   if (newColor) {
       document.bgColor = newColor
   }

} </SCRIPT> </HEAD> <BODY onUnload="document.forms[0].reset()"> <FORM>

Choose a background color: <SELECT name="colorsList" onChange="seeColor(this)"> <OPTGROUP ID="optGrp1" label="group 1"> <OPTION value="#ff9999">Light Red <OPTION value="green">green <OPTION value="red">Red <OPTION value="yellow">yellow </OPTGROUP> <OPTGROUP ID="optGrp2" label="group 2"> <OPTION value="#ccff66">Light Green <OPTION value="yellow">yellow <OPTION value="green">green <OPTION value="red">red </OPTGROUP> <OPTGROUP ID="optGrp3" label="Blues"> <OPTION value="#ccffff">Light Blue <OPTION value="#66ccff">Medium Blue <OPTION value="#0000ff">Bright Blue <OPTION value="#000066">Dark Blue </OPTGROUP> </SELECT>

<INPUT TYPE="radio" NAME="labels" CHECKED onClick="setRegularLabels(this.form.colorsList)">Regular Label Names <INPUT TYPE="radio" NAME="labels" onClick="setNaturalLabels(this.form.colorsList)">Label Names from Nature

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



 </source>


Modifying SELECT Options

   <source lang="html4strict">

/* JavaScript Bible, Fourth Edition by Danny Goodman Publisher: John Wiley & Sons CopyRight 2001 ISBN: 0764533428

  • /

<HTML> <HEAD> <TITLE>Changing Options On The Fly</TITLE> <SCRIPT LANGUAGE="JavaScript"> // flag to reload page for older NNs var isPreNN6 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) <= 4) // initialize color list arrays plainList = new Array(6) hardList = new Array(6) plainList[0] = "cyan" hardList[0] = "#00FFFF" plainList[1] = "magenta" hardList[1] = "#FF00FF" plainList[2] = "yellow" hardList[2] = "#FFFF00" plainList[3] = "lightgoldenrodyellow" hardList[3] = "#FAFAD2" plainList[4] = "salmon" hardList[4] = "#FA8072" plainList[5] = "dodgerblue" hardList[5] = "#1E90FF" // change color language set function setLang(which) { 

   var listObj = document.forms[0].colors
   // filter out old browsers
   if (listObj.type) {
       // find out if it"s 3 or 6 entries
       var listLength = listObj.length
       // save selected index
       var currSelected = listObj.selectedIndex
       // replace individual existing entries
       for (var i = 0; i < listLength; i++) {
           if (which == "plain") {
               listObj.options[i].text = plainList[i]
           } else {
               listObj.options[i].text = hardList[i]
           }
       }
       if (isPreNN6) {
           history.go(0)
       } else {
           listObj.selectedIndex = currSelected
       }
   }

} // create entirely new options list function setCount(choice) { 

   var listObj = document.forms[0].colors
   // filter out old browsers
   if (listObj.type) {
       // get language setting
       var lang = (document.forms[0].geekLevel[0].checked) ? "plain" : "hard"
       // empty options from list
       listObj.length = 0
       // create new option object for each entry
       for (var i = 0; i < choice.value; i++) {
           if (lang == "plain") {
               listObj.options[i] = new Option(plainList[i])
           } else {
               listObj.options[i] = new Option(hardList[i])
           }
       }
       listObj.options[0].selected = true
       if (isPreNN6) {
           history.go(0)
       }
   }

} </SCRIPT> </HEAD> <BODY>

Flying Select Options

<FORM> Choose a palette size: <INPUT TYPE="radio" NAME="paletteSize" VALUE=3 onClick="setCount(this)" CHECKED>Three <INPUT TYPE="radio" NAME="paletteSize" VALUE=6 onClick="setCount(this)">Six

Choose geek level: <INPUT TYPE="radio" NAME="geekLevel" VALUE="" onClick="setLang("plain")" CHECKED>Plain-language <INPUT TYPE="radio" NAME="geekLevel" VALUE="" onClick="setLang("hard")">Gimme hex-triplets! <P> Select a color: <SELECT NAME="colors"> <OPTION SELECTED>cyan <OPTION>magenta <OPTION>yellow </SELECT> </FORM> </BODY> </HTML> </source>

Modifying SELECT Options (IE4+)

   <source lang="html4strict">

/* JavaScript Bible, Fourth Edition by Danny Goodman Publisher: John Wiley & Sons CopyRight 2001 ISBN: 0764533428

  • /

<HTML> <HEAD> <TITLE>Changing Options On The Fly</TITLE> <SCRIPT LANGUAGE="JavaScript"> // flag to reload page for older NNs var isPreNN6 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) <= 4) // initialize color list arrays plainList = new Array(6) hardList = new Array(6) plainList[0] = "cyan" hardList[0] = "#00FFFF" plainList[1] = "magenta" hardList[1] = "#FF00FF" plainList[2] = "yellow" hardList[2] = "#FFFF00" plainList[3] = "lightgoldenrodyellow" hardList[3] = "#FAFAD2" plainList[4] = "salmon" hardList[4] = "#FA8072" plainList[5] = "dodgerblue" hardList[5] = "#1E90FF" // change color language set function setLang(which) { 

   var listObj = document.forms[0].colors
   var newOpt
   // filter out old IE browsers
   if (listObj.type) {
       // find out if it"s 3 or 6 entries
       var listLength = listObj.length
       // save selected index
       var currSelected = listObj.selectedIndex
       // replace individual existing entries
       for (var i = 0; i < listLength; i++) {
           newOpt = document.createElement("OPTION")
           newOpt.text = (which == "plain") ? plainList[i] : hardList[i]
           listObj.options.remove(i)
           listObj.options.add(newOpt, i)
       }
       listObj.selectedIndex = currSelected
   }

} // create entirely new options list function setCount(choice) { 

   var listObj = document.forms[0].colors
   var newOpt
   // filter out old browsers
   if (listObj.type) {
       // get language setting
       var lang = (document.forms[0].geekLevel[0].checked) ? "plain" : "hard"
       // empty options from list
       while (listObj.options.length) {
           listObj.options.remove(0)
       }
       // create new option object for each entry
       for (var i = 0; i < choice.value; i++) {
           newOpt = document.createElement("OPTION")
           newOpt.text = (lang == "plain") ? plainList[i] : hardList[i]
           listObj.options.add(newOpt)
       }
       listObj.options[0].selected = true
   }

} </SCRIPT> </HEAD> <BODY>

Flying Select Options

<FORM> Choose a palette size: <INPUT TYPE="radio" NAME="paletteSize" VALUE=3 onClick="setCount(this)" CHECKED>Three <INPUT TYPE="radio" NAME="paletteSize" VALUE=6 onClick="setCount(this)">Six <P> Choose geek level: <INPUT TYPE="radio" NAME="geekLevel" VALUE="" onClick="setLang("plain")" CHECKED>Plain-language <INPUT TYPE="radio" NAME="geekLevel" VALUE="" onClick="setLang("hard")">Gimme hex-triplets! <P> Select a color: <SELECT NAME="colors"> 

   <OPTION SELECTED>cyan
   <OPTION>magenta
   <OPTION>yellow

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




 </source>


Modifying SELECT Options (NN6+)

   <source lang="html4strict">

/* JavaScript Bible, Fourth Edition by Danny Goodman Publisher: John Wiley & Sons CopyRight 2001 ISBN: 0764533428

  • /

<HTML> <HEAD> <TITLE>Changing Options On The Fly</TITLE> <SCRIPT LANGUAGE="JavaScript"> // flag to reload page for older NNs var isPreNN6 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) <= 4) // initialize color list arrays plainList = new Array(6) hardList = new Array(6) plainList[0] = "cyan" hardList[0] = "#00FFFF" plainList[1] = "magenta" hardList[1] = "#FF00FF" plainList[2] = "yellow" hardList[2] = "#FFFF00" plainList[3] = "lightgoldenrodyellow" hardList[3] = "#FAFAD2" plainList[4] = "salmon" hardList[4] = "#FA8072" plainList[5] = "dodgerblue" hardList[5] = "#1E90FF" // change color language set // change color language set function setLang(which) { 

   var listObj = document.forms[0].colors
   var newOpt
   // filter out old IE browsers
   if (listObj.type) {
       // find out if it"s 3 or 6 entries
       var listLength = listObj.length
       // save selected index
       var currSelected = listObj.selectedIndex
       // replace individual existing entries
       for (var i = 0; i < listLength; i++) {
           newOpt = document.createElement("OPTION")
           newOpt.text = (which == "plain") ? plainList[i] : hardList[i]
           listObj.remove(i)
           listObj.add(newOpt, listObj.options[i])
       }
       listObj.selectedIndex = currSelected
   }

} // create entirely new options list function setCount(choice) { 

   var listObj = document.forms[0].colors
   var newOpt
   // filter out old browsers
   if (listObj.type) {
       // get language setting
       var lang = (document.forms[0].geekLevel[0].checked) ? "plain" : "hard"
       // empty options from list

while (listObj.options.length) { 

           listObj.remove(0)
       }
       // create new option object for each entry
       for (var i = 0; i < choice.value; i++) {
           newOpt = document.createElement("OPTION")
           newOpt.text = (lang == "plain") ? plainList[i] : hardList[i]
           listObj.add(newOpt, null)
       }
       listObj.options[0].selected = true
   }

} </SCRIPT> </HEAD> <BODY>

Flying Select Options

<FORM> Choose a palette size: <INPUT TYPE="radio" NAME="paletteSize" VALUE=3 onClick="setCount(this)" CHECKED>Three <INPUT TYPE="radio" NAME="paletteSize" VALUE=6 onClick="setCount(this)">Six <P> Choose geek level: <INPUT TYPE="radio" NAME="geekLevel" VALUE="" onClick="setLang("plain")" CHECKED>Plain-language <INPUT TYPE="radio" NAME="geekLevel" VALUE="" onClick="setLang("hard")">Gimme hex-triplets! <P> Select a color: <SELECT NAME="colors"> 

   <OPTION SELECTED>cyan
   <OPTION>magenta
   <OPTION>yellow

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




 </source>


Navigating with a SELECT Object

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Select Navigation</TITLE> <SCRIPT LANGUAGE="JavaScript"> function goThere() { 

   var list = document.forms[0].urlList;
   location = list.options[list.selectedIndex].value;

} </SCRIPT> </HEAD> <BODY> <FORM> Choose a place to go: <SELECT NAME="urlList" onChange="goThere()"> 

   <OPTION SELECTED VALUE="http://www.wbex.ru">wbex Home Page
   <OPTION VALUE="http://www.google.ru/">Google

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



 </source>


Number of options in the dropdown list(Combobox)

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function formAction(){ 

   var x=document.getElementById("mySelect")
   alert(x.length)

} </script> </head> <body> <form> <select id="mySelect"> 

 <option>1</option>
 <option>2</option>
 <option>3</option>

</select> <input type="button" onclick="formAction()" value="How many options in the list?"> </form> </body> </html> 



 </source>


Option default Selected Example

   <source lang="html4strict">

<html> <body> <form id="myForm"><select name="select"> 

   <option value="1">Item 1</option>
   <option value="2">Item 2</option>
   <option id="o3" value="3">Default selected Option</option>

<script language="JavaScript"> 

   document.getElementById("o3").defaultSelected = true;
   var n = document.getElementById("o3").innerText;
   function function1() {
       alert("Default selected Option label:\n"+"""+n+""");
       document.getElementById("myForm").reset(); 
   }

</script> 

   <option value="4">Item 4</option>
   <option value="5">Item 5</option>

</select> </form> <input type="button" value="Click here" onclick="function1();"> </body> </html> 



 </source>


Option label

   <source lang="html4strict">

<html> <body> <form name="form2" method="post" action=""> <select name="select1"> <optgroup id="optg1"> 

   <option id="opt1_1">first</option>
   <option>second</option>
   <option>third</option>

</optgroup> <optgroup id="optg2"> 

   <option>first item in second group </option>
   <option id="opt2_2">second item in second group </option>
   <option>third item in second group </option>

</optgroup> <script language="JavaScript"> 

   document.getElementById("optg1").label = "first group";
   document.getElementById("optg2").label = "second group";

</script> </select> </form> </body> </html> 



 </source>


Option selected

   <source lang="html4strict">

<html> <head> <script> function function1(colors) { 

   var col = (colors.options[colors.selectedIndex].value);
   document.all.myOption.selected = true;
   if (col) {
       document.bgColor = col;
   }

} </script> </head> <body id="myBody" onUnload="document.forms[0].reset();"> <form method="post" action=""> <select name="colors" onChange="function1(this);"> 

   <option value="white">White</option>
   <option id="myOption" value="cyan">Cyan</option>
   <option value="ivory">Ivory</option>

</select> </form> </body> </html> 



 </source>


Option selected index

   <source lang="html4strict">

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

</script> </head> <body> <basefont size=4> <form> Please choose a city: <select name="marsupials" onChange="selectChange()"> <option>A <option>B <option>C </select> </form> </body> </html> 



 </source>


Option selected Index Example

   <source lang="html4strict">

<html> <body> <script> function function1(colors) { 

   var col = (colors.options[colors.selectedIndex].value);
   if (col) {
       document.bgColor = col; 
   } 
   alert("SelectedIndex value = "+col);

} </script> <form method="post" action=""> <select name="colors" onChange="function1(this);"> 

   <option value="white" selected>White</option>
   <option value="cyan">Cyan</option>
   <option value="ivory">Ivory</option>
   <option id="myO" value="blue">Blue</option>
   <option value="red">Red</option>
   <option value="lightblue">Lightblue</option>
   <option value="beige">Beige</option>

</select> </form> 



 </source>


Options in select

   <source lang="html4strict">

<script> function function1() { 

   var col = document.all.colors.size;
   alert(col+" number of options")

} </script> <form method="post" action=""> <select id="colors" size="10"> 

   <option value="white" selected>White</option>
   <option value="cyan">Cyan</option>
   <option value="ivory">Ivory</option>
   <option value="blue">Blue</option>
   <option value="red">Red</option>
   <option value="lightblue">Lightblue</option>
   <option value="beige">Beige</option>

</select> <input type="button" value="Number of options" onclick="function1();"> </form> 



 </source>


Properties of the Option Object

   <source lang="html4strict">

defaultSelected Refers to the option that is selected by default from the select box. index Refers to the zero-based indexed location of an element in the Select.options array. selected Refers to the selected value of the select box. text Refers to the text for the option. value Refers to the value that is returned when the option is selected. 



 </source>


Remove an option from a dropdown list (combobox)

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function formAction(){ 

   var x=document.getElementById("aSelectControl")
   x.remove(x.selectedIndex)

} </script> </head> <body> <form> <select id="aSelectControl"> 

 <option>Java</option>
 <option>PHP</option>
 <option>Perl</option>

</select> <input type="button" onclick="formAction()" value="Remove option"> </form> </body> </html> 



 </source>


Return the name of the form that contains dropdown list (combobox)

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function formAction(){ 

   var x=document.getElementById("mySelect")
   alert(x.form.name)

} </script> </head> <body> <form name="myForm"> 

   <select id="mySelect">
       <option>Apple</option>
       <option>Banana</option>
       <option>Orange</option>
   </select>
   <input type="button" onclick="formAction()" value="Show name of the form">

</form> </body> </html> 



 </source>


Return the selected option as a number

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function getIndex(){ 

   var x=document.getElementById("aSelectControl")
   alert(x.selectedIndex)

} </script> </head> <body> <form> Select your favorite language: <select id="aSelectControl"> 

 <option>Java</option>
 <option>Perl</option>
 <option>PHP</option>

</select>

<input type="button" onclick="getIndex()" value="Show index of selected language"> </form> </body> </html> 




 </source>


Return the selected option as text in option

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function getText(){ 

   var x=document.getElementById("aSelectControl")
   alert(x.options[x.selectedIndex].text)

} </script> </head> <body> <form> Select your favorite language: <select id="aSelectControl"> 

 <option>Java</option>
 <option>Perl</option>
 <option>PHP</option>

</select>

<input type="button" onclick="getText()" value="Show text of selected language"> </form> </body> </html> 




 </source>


Selecting an Option Using JavaScript

   <source lang="html4strict">

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

    function quickSelect() {
         var bnd = document.form1.band.value
         bnd = bnd.toUpperCase()
         if (bnd == "OASIS") {
              document.form1.songs[4].selected = "1"
         }
    }

</script> </head> <body> 

   <form name="form1">
       Favorite Band: 
       <input type=text name="band" size=20 onBlur="quickSelect()"><p>
       Songs: <select NAME="songs" SIZE=1>
       <option VALUE="Liquid">A</option>
       <option VALUE="World"s Apart">B</option>
       <option VALUE="Ironic">C</option>
       <option VALUE="1979">D</option>
       <option VALUE="Wonderwall">E</option>
       <option VALUE="F">F</option>
       </SELECT><p>
       <input type=button value="Show Current" onClick="quickSelect()">
   </form>

</body> </html> 



 </source>


Select multiple options in a dropdown list (option)

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function formAction(){ 

   var x=document.getElementById("aSelectControl")
   x.multiple=true

} </script> </head> <body> <form> <select id="aSelectControl" size="3"> 

 <option>Java</option>
 <option>PHP</option>
 <option>Perl</option>

</select> <input type="button" onclick="formAction()" value="Set to Select multiple"> </form> </body> </html> 



 </source>


Set select to multiple selected

   <source lang="html4strict">

<html> <body> Choose your Ice Creams
<select name="mySelect" rows="10"> 

   <option>A</option>
   <option>B</option>
   <option>C Chip</option>
   <option>D</option>

</select> <button onclick="mySelect.multiple=true;">Multiple</button> <button onclick="mySelect.multiple=false;">Single</button> </body> </html> 



 </source>


Set the select control value

   <source lang="html4strict">

<html> <head> 

   <title>Pizza</title>
   <script type = "text/javascript">
   function flip(pizzatype) {
       if (pizzatype.value == "A") {
           document.forms["pizzaform"].topping.value = "aa";
       } else if (pizzatype.value == "B") {
           document.forms["pizzaform"].topping.value = "bb";
       } else if (pizzatype.value == "C") {
           document.forms["pizzaform"].topping.value = "cc";
       }
   }
   </script>

</head> <body> <form id="pizzaform" action="#" onsubmit="return false;"> 

   <p>
       <input type="button" name="valueA" onclick="flip(valueA)" value="A"/>
       <input type="button" name="valueB" onclick="flip(valueB)" value="B" />
       <input type="button" name="valueC" onclick="flip(valueC)" value="C" />

Main Topping: <select name="topping"> <option value="aa" selected="selected">Cheese</option> <option value="bb">Veggies</option> <option value="cc">Meat</option> <option value="dd">Ham & Pineapples</option> </select>

</form> </body> </html> 


 </source>


Show Selected Option items

   <source lang="html4strict">

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

</script> </head> <body> <form name="mySelection"> Where do the Aliens exist? <select name="planets"> <option>AA <option selected>BB <option>CC </select>

<input type="button" value="See selection" onClick="showSelected(this.form)"> </form> </body> </html> </source>

"text" Example

   <source lang="html4strict">

<html> <body> <script> function function1(colors) { 

   var col = (colors.options[colors.selectedIndex].text);
   colors.options[colors.selectedIndex].text = "New "+col;

} </script> <form method="post" action=""> <select name="colors" onChange="function1(this);"> 

   <option value="white" selected>White</option>
   <option value="cyan">Cyan</option>
   <option value="ivory">Ivory</option>
   <option id="myO" value="blue">Blue</option>
   <option value="red">Red</option>
   <option value="lightblue">Lightblue</option>
   <option value="beige">Beige</option>

</select> </form> </body> </html> 



 </source>


Triggering a Color Change from a Pop-Up Menu

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Color Changer 2</TITLE> <SCRIPT LANGUAGE="JavaScript"> function seeColor(list) { 

   var newColor = (list.options[list.selectedIndex].value)
   if (newColor) {
       document.bgColor = newColor
   }

} </SCRIPT> </HEAD> <BODY onUnload="document.forms[0].reset()"> <FORM> <P>Choose a background color: <SELECT NAME="colorsList" onChange="seeColor(this)"> 

   <OPTION SELECTED VALUE="">
   <OPTION VALUE="cornflowerblue">A
   <OPTION VALUE="darksalmon">B
   <OPTION VALUE="lightgoldenrodyellow">C
   <OPTION VALUE="seagreen">D

</SELECT>

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



 </source>


Triggering a Value Change from a Pop-Up Menu

   <source lang="html4strict">

<html> <head> <title>Color Changer 2</title> <script type="text/javascript"> function seeColor(list) { 

   var newColor = (list.options[list.selectedIndex].value); 
   if (newColor) { 
       document.bgColor = newColor; 
   }

} </script> </head> <body onload="seeColor(document.getElementById("colorsList"))"> <form> <select name="colorsList" id="colorsList" onchange="seeColor(this)"> <option selected="selected" value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> </form> </body> </html> 


 </source>


URL Option ComboBox

   <source lang="html4strict">

<HTML> <BODY> <FORM name="f1"> <SELECT name="s1"> <OPTION SELECTED value="http://www.wbex.ru">wbex.ru <OPTION value="http://www.perl.ru">Perl.ru <OPTION value="http://www.wbex.ru">Homepage Tools </SELECT> <INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value"> </FORM>

<FORM name="f2"> <SELECT name="s2" onChange="window.location=document.f2.s2.options[document.f2.s2.selectedIndex].value"> <OPTION SELECTED value="http://www.wbex.ru">wbex.ru <OPTION value="http://www.perl.ru">Perl.ru <OPTION value="http://www.wbex.ru">wbex.ru </SELECT> </FORM> </BODY> </HTML> </source>

Using a Summary Form to Support Local Processing

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Submitting the results of local form processing</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY>

Select your next car:

Model           Doors     Color    Accessories

<FORM ACTION="" NAME="orderForm"ONSUBMIT="return processOrder()"> <SELECT NAME="model" SIZE="3"> <OPTION>A</OPTION> <OPTION>B</OPTION> <OPTION>C</OPTION> <OPTION>D</OPTION> </SELECT> <SELECT NAME="doors" SIZE="3"> <OPTION>2</OPTION> <OPTION>4</OPTION> </SELECT> <SELECT NAME="color" SIZE="3"> <OPTION>red</OPTION> <OPTION>white</OPTION> <OPTION>blue</OPTION> <OPTION>black</OPTION> <OPTION>brown</OPTION> <OPTION>silver</OPTION> <OPTION>pink</OPTION> </SELECT> <SELECT NAME="accessories" SIZE="3" MULTIPLE="MULTIPLE"> <OPTION>Z</OPTION> <OPTION>X</OPTION> <OPTION>Y</OPTION> <OPTION>U</OPTION> <OPTION>R</OPTION> </SELECT>

<P><INPUT TYPE="SUBMIT" NAME="order" VALUE="I"ll take it!">

</FORM> <FORM ACTION="http://www.wbex.ru" METHOD="GET" NAME="submitForm"> <INPUT TYPE="HIDDEN" NAME="result"> </FORM> </BODY> </HTML> 



 </source>


Using the Location object to change another frame"s URL

   <source lang="html4strict">

<html> <head> <title>Footnotes Frame in Location Object Example</title> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT> </head>

<body>

protocol//hostname:port pathname

<form name="loc" method="POST"> 

Protocol:    Hostname:              Pathname:
<select name="ProtocolField" size=1>
<option>http://</option>
<option>file://</option>
<option>javascript:</option>
<option>ftp://</option>
<option>mailto:</option>
</select> 
<input type=text size=23 maxlength=256 name="HostnameField" value="www.wbex.ru"> 
<input type=text size=20 maxlength=100 name="PathnameField" value="/"> 
<input type=button name="Go" value="Go" onClick="gotoPage()">

</form> </body> </html> 



 </source>


Using the options[index].text Property

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Color Changer 1</TITLE> <SCRIPT LANGUAGE="JavaScript"> function seeColor(form) { 

   var newColor = (form.colorsList.options[form.colorsList.selectedIndex].text);
   document.bgColor = newColor;

} </SCRIPT> </HEAD> <BODY> <FORM>

Choose a background color: <SELECT NAME="colorsList"> <OPTION SELECTED>Gray <OPTION>Lime <OPTION>Ivory <OPTION>Red </SELECT>

<INPUT TYPE="button" VALUE="Change It" onClick="seeColor(this.form)">

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



 </source>


Using the options[index].value Property

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Color Changer 2</TITLE> <SCRIPT LANGUAGE="JavaScript"> function seeColor(form) { 

   var newColor = (form.colorsList.options[form.colorsList.selectedIndex].value);
   document.bgColor = newColor;

} </SCRIPT> </HEAD> <BODY> <FORM>

Choose a background color: <SELECT NAME="colorsList"> <OPTION SELECTED VALUE="cornflowerblue">Cornflower Blue <OPTION VALUE="darksalmon">A <OPTION VALUE="lightgoldenrodyellow">B <OPTION VALUE="seagreen">C </SELECT>

<INPUT TYPE="button" VALUE="Change It" onClick="seeColor(this.form)">

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



 </source>


Using the selectedIndex Property

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Select Inspector</TITLE> <SCRIPT LANGUAGE="JavaScript"> function inspect(form) { 

   alert(form.colorsList.options[form.colorsList.selectedIndex].text)

} </SCRIPT> </HEAD> <BODY> <FORM>

<SELECT NAME="colorsList"> <OPTION SELECTED>Red <OPTION VALUE="Plants">Green <OPTION>Blue </SELECT>

<INPUT TYPE="button" VALUE="Show Selection" onClick="inspect(this.form)">

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



 </source>


"value" Example

   <source lang="html4strict">

<html> <body> <select onchange="alert(this.options[this.selectedIndex].value);"> 

   <option value="value A">a</option>
   <option value="value b">b</option>
   <option value="value c">c</option>
   <option value="value d">d</option>
   <option value="value e">e</option>

</select> </body> </html> 



 </source>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/Option_Select_ComboBox&oldid=2511»