JavaScript DHTML/Form Control/Option Select ComboBox

Содержание

1 Add an option to select
2 Add or remove options from select form control
3 Auto Linked Option Listbox without button
4 Change background
5 Change the option text
6 Change the size of a dropdown list (ComboBox)
7 Changing Select Element Content (two Combobox)
8 Click button to navigate to selected url from form select control
9 ComboBox set value to TextField
10 Cycling through a Multiple-Selection List
11 Demonstrates select object used as a multi-line list box
12 Disable and enable a dropdown list (combobox)
13 Disable or enable an option
14 Dropdown list (combobox) in a form
15 dropdown list (combobox) in form 2
16 Drop-down Redirect - No Submit button
17 Drop-down Redirect - Submit
18 Get changed selection from form select
19 Grouped selection control on change event
20 "index" Example
21 Is Select a select-multiple
22 Linked ComboBox (option) Country =- province
23 Menu(Option) Generator
24 Methods and Properties of the Select Object
25 Modifying OPTGROUP Element Labels
26 Modifying SELECT Options
27 Modifying SELECT Options (IE4+)
28 Modifying SELECT Options (NN6+)
29 Navigating with a SELECT Object
30 Number of options in the dropdown list(Combobox)
31 Option default Selected Example
32 Option label
33 Option selected
34 Option selected index
35 Option selected Index Example
36 Options in select
37 Properties of the Option Object
38 Remove an option from a dropdown list (combobox)
39 Return the name of the form that contains dropdown list (combobox)
40 Return the selected option as a number
41 Return the selected option as text in option
42 Selecting an Option Using JavaScript
43 Select multiple options in a dropdown list (option)
44 Set select to multiple selected
45 Set the select control value
46 Show Selected Option items
47 "text" Example
48 Triggering a Color Change from a Pop-Up Menu
49 Triggering a Value Change from a Pop-Up Menu
50 URL Option ComboBox
51 Using a Summary Form to Support Local Processing
52 Using the Location object to change another frame"s URL
53 Using the options[index].text Property
54 Using the options[index].value Property
55 Using the selectedIndex Property
56 "value" Example

Add an option to select

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

Add or remove options from select form control

   
<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>
<BR>
<INPUT TYPE="button" 
       VALUE="Remove AAA" 
       NAME=butRemoveWed 
       onclick="butRemoveWed_onclick()">
<INPUT TYPE="button" 
       VALUE="Add AAA" 
       NAME=butAddWed 
       onclick="butAddWed_onclick()">
<BR>
</FORM>
</BODY>
</HTML>

Auto Linked Option Listbox without button

   
<HTML>
<HEAD>
<TITLE>multiselect.html</TITLE>
<SCRIPT>
<!--
var languages = ["English", "Spanish"];
var days = [["Monday", "Tuesday", "Wednesday"],
        ["lunes", "martes", "miercoles"]];
var numbers = [["one", "two", "three"],
           ["uno", "dos", "tres"]];
var zodiac = [["Aries", "Taurus", "Gemini"],
          ["Aries", "Tauro", "Geminis"]];
function updateList(formObject) {
  if(formObject.Languages.selectedIndex == -1 || formObject.Groups.selectedIndex == -1) { 
    return;
    }
  var langIdx = formObject.Languages.selectedIndex;
  var groupIdx = formObject.Groups.selectedIndex;
  var arrayName = formObject.Groups.options[groupIdx].text;
  arrayName = arrayName.toLowerCase();
  var translate = document.Lists.Translation;
  for (var i = 0; i < translate.length; i++) {
    var item = eval(arrayName + "[" + langIdx + "]");
    if (i < item.length) {  
      translate.options[i].text = item[i];
    }else {
      translate.options[i].text = "";
    }
  }
}
       
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Lists">
<TABLE BORDER="1" CELLSPACING=1>
  <TR>
    <TD VALIGN="TOP">
      <B>Language</B>
      <BR>
      <SELECT NAME="Languages" SIZE="2" onChange="updateList(this.form);">
      <OPTION>English
      <OPTION>Spanish
      </SELECT>
      <BR><BR><BR>
      <B>Group</B>
      <BR>
      <SELECT NAME="Groups" SIZE="3" onChange="updateList(this.form);">
      <OPTION>Numbers
      <OPTION>Days
      <OPTION>Zodiac
      </SELECT>
      <BR><BR>
    </TD>
    <TD VALIGN="TOP">
      <B>Translation</B>
      <BR>
      <SELECT NAME="Translation" SIZE="12">
      <OPTION>
      <OPTION>
      <OPTION>
      </SELECT>
    </TD>
  </TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Change background

   
<HTML>
<HEAD>
<TITLE>Change background</TITLE>
</HEAD>
<SCRIPT>
<!--
function bgChange(selObj) {
  newColor = selObj.options[selObj.selectedIndex].text;
  document.bgColor = newColor;
  selObj.selectedIndex = -1;
  }
//-->
</SCRIPT>
<BODY STYLE="font-family:Arial">
<B>Changing Background Colors</B>
<BR>
 <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>

Change the option text

   
<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>
<br><br>
<input type="button" onclick="changeText()" value="Change text of selected language">
</form>
</body>
</html>

Change the size of a dropdown list (ComboBox)

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

Changing Select Element Content (two Combobox)

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->
<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>
<h1>Changing Select Element Content</h1>
<hr /> 
<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>&nbsp;
<select name="city">
    <option value="" selected>Choose a City:</option>
</select>
...
</form>
</body>
</html>

Click button to navigate to selected url from form select control

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

ComboBox set value to TextField

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

Cycling through a Multiple-Selection List

   
<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></p> 
<p>
<input type="button" value="View" onclick="seeList(this.form)" /> 
</p> 
</form> 
</body> 
</html>

Demonstrates select object used as a multi-line list box

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

Disable and enable a dropdown list (combobox)

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

Disable or enable an option

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

Dropdown list (combobox) in a form

   
<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>
<br><br>
Your favorite browser is: <input type="text" name="favorite" size="20">
</form>
</body>
</html>

dropdown list (combobox) in form 2

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

Drop-down Redirect - No Submit button

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

Drop-down Redirect - Submit

   
<html>
<head>
<title>test</title>
<script language="JavaScript">
<!--
function WinOpen() {
  var url=document.redirect.selection.value
  document.location.href=url
}
// -->
</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>

Get changed selection from form select

   
<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>
<br>
<input type = "button"
       value = "change color"
       onClick = "changeColor()">
</form>
</body>
</html>

Grouped selection control on change event

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

"index" Example

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

Is Select a select-multiple

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

Linked ComboBox (option) Country =- province

   
<html>
<head>
<title>Create Form Elements</title>
<script language="javascript">
<!--
function CreateProvince() {
  var Primary = document.newforms.country.selectedIndex;
  if ((Primary == null) || (Primary == 0)) return;
  if (Primary == 1) {
  var ProvState = new Array;
  ProvState[0] = new Option("Alberta");
  ProvState[1] = new Option("British Columbia");
  ProvState[2] = new Option("Manitoba");
  ProvState[3] = new Option("New Brunswick");
  ProvState[4] = new Option("Newfoundland");
  ProvState[5] = new Option("Nova Scotia");
  ProvState[6] = new Option("Northwest Territories");
  ProvState[7] = new Option("Nunavut");
  ProvState[8] = new Option("Ontario");
  ProvState[9] = new Option("Prince Edward Island");
  ProvState[10] = new Option("Quebec");
  ProvState[11] = new Option("Saskatchewan");
  ProvState[12] = new Option("Yukon");
  }
  if (Primary == 2) {
  var ProvState = new Array;
  ProvState[0] = new Option("Alabama");
  ProvState[1] = new Option("Alaska");
  ProvState[2] = new Option("Arizona");
  ProvState[3] = new Option("Arkansas");
  ProvState[4] = new Option("California");
  ProvState[5] = new Option("Colorado");
  ProvState[6] = new Option("Connecticut");
  ProvState[7] = new Option("Delaware");
  ProvState[8] = new Option("Florida");
  ProvState[9] = new Option("Georgia");
  ProvState[10] = new Option("Hawaii");
  ProvState[11] = new Option("IdahoState");
  ProvState[12] = new Option("Illinois");
  ProvState[13] = new Option("Indiana");
  ProvState[14] = new Option("Iowa");
  ProvState[15] = new Option("Kansas");
  ProvState[16] = new Option("Kentucky");
  ProvState[17] = new Option("Louisiana");
  ProvState[18] = new Option("Maine");
  ProvState[19] = new Option("Maryland");
  ProvState[20] = new Option("Massachusetts");
  ProvState[21] = new Option("Michigan");
  ProvState[22] = new Option("Minnesota");
  ProvState[23] = new Option("Mississippi");
  ProvState[24] = new Option("Missouri");
  ProvState[25] = new Option("Montana");
  ProvState[26] = new Option("Nebraska");
  ProvState[27] = new Option("Nevada");
  ProvState[28] = new Option("NewHampshire");
  ProvState[29] = new Option("NewJersey");
  ProvState[30] = new Option("NewMexico");
  ProvState[31] = new Option("NewYork");
  ProvState[32] = new Option("NorthCarolina");
  ProvState[33] = new Option("NorthDakota");
  ProvState[34] = new Option("Ohio");
  ProvState[35] = new Option("Oklahoma");
  ProvState[36] = new Option("Oregon");
  ProvState[37] = new Option("Pennsylvania");
  ProvState[38] = new Option("RhodeIsland");
  ProvState[39] = new Option("SouthCarolina");
  ProvState[40] = new Option("SouthDakota");
  ProvState[41] = new Option("Tennessee");
  ProvState[42] = new Option("Texas");
  ProvState[43] = new Option("Utah");
  ProvState[44] = new Option("Vermont");
  ProvState[45] = new Option("Virginia");
  ProvState[46] = new Option("Washington");
  ProvState[47] = new Option("WestVirginia");
  ProvState[48] = new Option("Wisconsin");
  ProvState[49] = new Option("Wyoming");
  }
  for (i=document.newforms.SelectProvState.options.length; i>0; i--) { 
  document.newforms.SelectProvState.options[i] = null;
  }
  for(i=0; i<ProvState.length; i++) {
  document.newforms.SelectProvState.options[i] = ProvState[i];
  }
  document.newforms.SelectProvState.options[0].selected = true;
}
//-->
</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>

Menu(Option) Generator

   
<!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">
<center><span style="font-family:arial,verdana,helvetica; font-weight:bold; color:#808080; font-size:34pt">Qiksearch</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:arial,verdana,helvetica; font-weight:bold; color:#DD0000; font-size:34pt">MenuGen</span></center>
<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("<table cellspacing="5" cellpadding="5" style="border:2 solid #808080" align="center"><tr><td>");
document.write("<table width="100%" cellspacing="0" cellpadding="1" bgcolor="#808080" style="border:2 solid #CCCCCC; font-family:verdana,arial,helvetica; font-size:8pt"><tr><td align="middle"><a href="javascript:about()"><font color="#FFFFFF" style="text-decoration:none">About</font></a></td><td bgcolor="#FFFFFF"></td><td align="middle"><a href="javascript:help()"><font color="#FFFFFF" style="text-decoration:none">Help</font></a></td><td bgcolor="#FFFFFF"></td><td align="middle"><a href="mailto:premshree@hotmail.ru"><font color="#FFFFFF" style="text-decoration:none">Contact</font></a></td><td bgcolor="#FFFFFF"></td><td align="middle"><a href="http://www.qiksearch.ru"><font color="#FFFFFF" style="text-decoration:none">Qiksearch</font></a></td></tr></table>");
document.write("<form name="qiksearch">");
if(navigator.appName=="Microsoft Internet Explorer")
{
 document.write("<font face="verdana,arial,helvetica" size="-1" color="#000000">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.<br><br>");
}
document.write("<b>Combo Caption :</b><br><br>");
document.write("<input type="text" value="Select" name="combo_caption" size="30" style="height:20; border:1 solid #000000">");
document.write("<br><br><b>Combo Items :</b><br><br>");
document.write("<div id="items">");
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"><br>");
}
document.write("</div>");
document.write("<br><center><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"></center>");
document.write("<br><font size="-2">&#169; 2002 <a href="mailto:premshree@hotmail.ru"><font face="verdana,arial,helvetica" size="-2" color="#000000">Premshree Pillai</font></a>. All rights reserved.</font></font></form>");
document.write("</td></tr></table>");
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"><br>";
 }
 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="<font face=arial,verdana,helvetica size=-2 color=#000000><b>&lt;!--Made with Qiksearch MenuGen--&gt;";
   message += "<br>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;";
   message += "<br>function go()";
   message += "<br>{";
   message += "<br>&nbsp;if (document.selecter.select1.options[document.selecter.select1.selectedIndex].value != &quot;none&quot;)";
   message += "<br>&nbsp;{";
   message += "<br>&nbsp;&nbsp;location = document.selecter.select1.options[document.selecter.select1.selectedIndex].value";
   message += "<br>&nbsp;}";
   message += "<br>}";
   message += "<br>&lt;/script&gt;";
   message += "<br>";
   message += "<br>&lt;script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;&gt;";
   message += "<br>document.write("&lt;form name=&quot;selecter&quot;&gt;&lt;select name=&quot;select1&quot;&gt;");";
   message += "<br>document.write("&lt;option value=none&gt;" + this.document.qiksearch.rubo_caption.value + "&lt;/option&gt;");";
   message += "<br>document.write("&lt;option value=none&gt;--------------------&lt;/option&gt;");";
    for(var i=1; i<=no_options; i++)
    {
     message += "<br>document.write("&lt;option value=&quot;" + eval("this.document.qiksearch.linkto" + i + ".value") + "&quot;&gt;" + eval("this.document.qiksearch.option" + i + ".value") + "&lt;/option&gt;");";
    }
   message += "<br>document.write("&lt;/select&gt;");";
   message += "<br>document.write("&lt;input type=&quot;button&quot; value=&quot;Go&quot; onclick=&quot;go()&quot;&gt;");";
   message += "<br>document.write("&lt;/form&gt;");";
   message += "<br>&lt;/script&gt;";
   message += "<br>&lt;!-- Download Qiksearch MenuGen from http://www.qiksearch.ru/javascripts/menugen.htm --&gt;";
   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>

Methods and Properties of the Select Object

   
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.

Modifying OPTGROUP Element Labels

   
<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>
<P>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></P>
<P>
<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</P>
</FORM>
</BODY>
</HTML>

Modifying SELECT Options

   
/*
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>
<H1>Flying Select Options</H1>
<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>

Modifying SELECT Options (IE4+)

   
/*
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>
<H1>Flying Select Options</H1>
<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>

Modifying SELECT Options (NN6+)

   
/*
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>
<H1>Flying Select Options</H1>
<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>

Navigating with a SELECT Object

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

Number of options in the dropdown list(Combobox)

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

Option default Selected Example

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

Option label

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

Option selected

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

Option selected index

   
<html>
<head>
<script language="JavaScript">
<!--
function selectChange() {
   selIdx = document.forms[0].marsupials.selectedIndex;
   newSel = document.forms[0].marsupials.options[selIdx].text;
   alert("Selection has changed to: " + newSel);
}
//-->
</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>

Option selected Index Example

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

Options in select

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

Properties of the Option Object

   
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.

Remove an option from a dropdown list (combobox)

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

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

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

Return the selected option as a number

   
<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>
<br><br>
<input type="button" onclick="getIndex()" value="Show index of selected language">
</form>
</body>
</html>

Return the selected option as text in option

   
<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>
<br><br>
<input type="button" onclick="getText()" value="Show text of selected language">
</form>
</body>
</html>

Selecting an Option Using JavaScript

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

Select multiple options in a dropdown list (option)

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

Set select to multiple selected

   
    
<html>
<body>
Choose your Ice Creams<br>
<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>

Set the select control value

  
<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" />
    </p>
    <p>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></p>
</form>
</body>
</html>

Show Selected Option items

   
<html>
<head>
<script language="JavaScript">
<!-- 
 function showSelected(f) {
  var selNum  = f.planets.selectedIndex;
  var selText = f.planets.options[selNum].text
  alert("Selection option selected: " + selNum + " " +"Selection option text: " + selText);
 }
//-->
</script>
</head>
<body>
<form name="mySelection">
Where <i>do</i> the Aliens exist?
<select name="planets">
<option>AA
<option selected>BB
<option>CC
</select>
<p>
<input type="button" value="See selection" onClick="showSelected(this.form)">
</form>
</body>
</html>

"text" Example

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

Triggering a Color Change from a Pop-Up Menu

   
<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>
</P>
</FORM>
</BODY>
</HTML>

Triggering a Value Change from a Pop-Up Menu

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

URL Option ComboBox

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

Using a Summary Form to Support Local Processing

   
<HTML>
<HEAD>
<TITLE>Submitting the results of local form processing</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function processOrder() {
 order = ""
 order += document.orderForm.model.selectedIndex
 order += document.orderForm.doors.selectedIndex
 order += document.orderForm.color.selectedIndex
 sel = document.orderForm.accessories
 for(i=0;i<sel.length;++i)
    if(sel.options[i].selected) order += i
 document.submitForm.result.value = order
 document.submitForm.submit()
 return false
}
// --></SCRIPT>
</HEAD>
<BODY>
<H1>Select your next car:</H1>
<PRE>Model           Doors     Color    Accessories</PRE>
<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!"></P>
</FORM>
<FORM ACTION="http://www.wbex.ru" METHOD="GET" NAME="submitForm">
<INPUT TYPE="HIDDEN" NAME="result">
</FORM>
</BODY>
</HTML>

Using the Location object to change another frame"s URL

   
<html>
<head>
<title>Footnotes Frame in Location Object Example</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
     function gotoPage() {
       window.location.href = window.document.loc.ProtocolField.
        options[window.document.loc.ProtocolField.selectedIndex].text
        + document.loc.HostnameField.value + document.loc.PathnameField.value
     }
//-->
</SCRIPT>
</head>
   
<body>
<p><font size=5>protocol//hostname:port pathname</font></p>
<form name="loc" method="POST">
<pre>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()">
</pre>
</form>
</body>
</html>

Using the options[index].text Property

   
<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>
<P>Choose a background color:
<SELECT NAME="colorsList">
    <OPTION SELECTED>Gray
    <OPTION>Lime
    <OPTION>Ivory
    <OPTION>Red
</SELECT></P>
<P><INPUT TYPE="button" VALUE="Change It" onClick="seeColor(this.form)"></P>
</FORM>
</BODY>
</HTML>

Using the options[index].value Property

   
<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>
<P>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></P>
<P><INPUT TYPE="button" VALUE="Change It" onClick="seeColor(this.form)"></P>
</FORM>
</BODY>
</HTML>

Using the selectedIndex Property

   
<HTML>
<HEAD>
<TITLE>Select Inspector</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function inspect(form) {
    alert(form.colorsList.options[form.colorsList.selectedIndex].text)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<P><SELECT NAME="colorsList">
    <OPTION SELECTED>Red
    <OPTION VALUE="Plants"><I>Green</I>
    <OPTION>Blue
</SELECT></P>
<P><INPUT TYPE="button" VALUE="Show Selection" onClick="inspect(this.form)"></P>
</FORM>
</BODY>
</HTML>

"value" Example

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

JavaScript DHTML/Form Control/Option Select ComboBox

Содержание

Add an option to select

Add or remove options from select form control

Auto Linked Option Listbox without button

Change background

Change the option text

Change the size of a dropdown list (ComboBox)

Changing Select Element Content (two Combobox)

Click button to navigate to selected url from form select control

ComboBox set value to TextField

Cycling through a Multiple-Selection List

Demonstrates select object used as a multi-line list box

Disable and enable a dropdown list (combobox)

Disable or enable an option

Dropdown list (combobox) in a form

dropdown list (combobox) in form 2

Drop-down Redirect - No Submit button

Drop-down Redirect - Submit

Get changed selection from form select

Grouped selection control on change event

"index" Example

Is Select a select-multiple

Linked ComboBox (option) Country =- province

Menu(Option) Generator

Methods and Properties of the Select Object

Modifying OPTGROUP Element Labels

Modifying SELECT Options

Modifying SELECT Options (IE4+)

Modifying SELECT Options (NN6+)

Navigating with a SELECT Object

Number of options in the dropdown list(Combobox)

Option default Selected Example

Option label

Option selected

Option selected index

Option selected Index Example

Options in select

Properties of the Option Object

Remove an option from a dropdown list (combobox)

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

Return the selected option as a number

Return the selected option as text in option

Selecting an Option Using JavaScript

Select multiple options in a dropdown list (option)

Set select to multiple selected

Set the select control value

Show Selected Option items

"text" Example

Triggering a Color Change from a Pop-Up Menu

Triggering a Value Change from a Pop-Up Menu

URL Option ComboBox

Using a Summary Form to Support Local Processing

Using the Location object to change another frame"s URL

Using the options[index].text Property

Using the options[index].value Property

Using the selectedIndex Property

"value" Example

Навигация

Поиск