Form Control - Option Select ComboBox

VelMurugan · Apr 06, 2009, 11:26 AM

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>

Source : java2s

VelMurugan · Apr 06, 2009, 11:27 AM

Options in select

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

VelMurugan · Apr 06, 2009, 11:28 AM

Option label

Code Select

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

VelMurugan · Apr 06, 2009, 11:29 AM

Option default Selected Example

Code Select

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

VelMurugan · Apr 06, 2009, 11:30 AM

Option selected

Code Select

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

VelMurugan · Apr 06, 2009, 06:14 PM

Is Select a select-multiple

Code Select

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

VelMurugan · Apr 06, 2009, 06:16 PM

'index' Example

Code Select

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

VelMurugan · Apr 06, 2009, 06:17 PM

Add an option to select

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

VelMurugan · Apr 06, 2009, 06:27 PM

Option selected index

Code Select


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

VelMurugan · Apr 06, 2009, 08:53 PM

Auto Linked Option Listbox without button

Code Select

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

VelMurugan · Apr 06, 2009, 08:53 PM

Change background

Code Select

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

VelMurugan · Apr 06, 2009, 08:54 PM

Changing Select Element Content (two Combobox)

Code Select

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

VelMurugan · Apr 06, 2009, 08:55 PM

Drop-down Redirect - No Submit button

Code Select

<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.java2s.com">java2s.com</option>
  <option value="http://www.apple.com">Stevie</option>
  
</select
></form>

</body>
</html>

VelMurugan · Apr 06, 2009, 08:56 PM

Drop-down Redirect - Submit

Code Select

<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.java2s.com">Hi</option>
  <option value="http://www.java2s.com">Bye</option>
</select>
<input type=button value="Go!" onClick="WinOpen();">
</form>

</body>
</html>

VelMurugan · Apr 07, 2009, 05:42 PM

Dropdown list (combobox) in a form

Code Select

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

VelMurugan · Apr 07, 2009, 05:44 PM

Disable or enable an option

Code Select

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

VelMurugan · Apr 08, 2009, 06:38 PM

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

Code Select

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

VelMurugan · Apr 09, 2009, 12:35 PM

Number of options in the dropdown list(Combobox)

Code Select

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

VelMurugan · Apr 09, 2009, 12:36 PM

Change the size of a dropdown list (ComboBox)

Code Select

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

VelMurugan · Apr 09, 2009, 12:36 PM

Select multiple options in a dropdown list (option)

Code Select

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

VelMurugan · Apr 09, 2009, 12:37 PM

Return the selected option as text in option

Code Select

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

VelMurugan · Apr 09, 2009, 12:37 PM

Return the selected option as a number

Code Select

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

VelMurugan · Apr 09, 2009, 12:38 PM

Change the option text

Code Select

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

VelMurugan · Apr 09, 2009, 12:45 PM

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.

VelMurugan · Apr 09, 2009, 12:46 PM

Using the Location object to change another frame's URL

Code Select

<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="[url=http://www.java2s.com]www.java2s.com[/url]"> 
<input type=text size=20 maxlength=100 name="PathnameField" value="/"> 
<input type=button name="Go" value="Go" onClick="gotoPage()">
</pre>
</form>
</body>
</html>

VelMurugan · Apr 09, 2009, 12:47 PM

Using a Summary Form to Support Local Processing

Code Select

<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.java2s.com" METHOD="GET" NAME="submitForm">
<INPUT TYPE="HIDDEN" NAME="result">
</FORM>
</BODY>
</HTML>

VelMurugan · Apr 09, 2009, 12:47 PM

Navigating with a SELECT Object

Code Select

<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.java2s.com">Java2s Home Page
    <OPTION VALUE="http://www.google.com/">Google
</select>
</FORM>
</BODY>
</HTML>

VelMurugan · Apr 09, 2009, 12:48 PM

Using the selectedIndex Property

Code Select

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

VelMurugan · Apr 09, 2009, 12:48 PM

Modifying OPTGROUP Element Labels

Code Select

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

VelMurugan · Apr 09, 2009, 12:49 PM

Using the options[index].text Property

Code Select

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

VelMurugan · Apr 09, 2009, 12:49 PM

Using the options[index].value Property

Code Select

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

VelMurugan · Apr 09, 2009, 12:50 PM

Triggering a Color Change from a Pop-Up Menu

Code Select

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

VelMurugan · Apr 09, 2009, 12:51 PM

Modifying SELECT Options

Code Select

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

VelMurugan · Apr 09, 2009, 12:51 PM

Modifying SELECT Options (IE4 )

Code Select

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

VelMurugan · Apr 09, 2009, 12:52 PM

Modifying SELECT Options (NN6 )

Code Select

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

VelMurugan · Apr 09, 2009, 12:52 PM

Selecting an Option Using JavaScript

Code Select

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

VelMurugan · Apr 09, 2009, 12:53 PM

Linked ComboBox (option) Country =- province

Code Select

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

VelMurugan · Apr 09, 2009, 12:53 PM

ComboBox set value to TextField

Code Select

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

VelMurugan · Apr 09, 2009, 12:54 PM

Menu(Option) Generator

Code Select

<!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.com/javascripts/menugen.htm
//*********************************************
//* Qiksearch MenuGen                         *
//* Javascript Drop-Down Menu Creator         *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.com                  *
//* E-mail : premshree@hotmail.com            *
//* Created on 03/14/02                       *
//* Use the script freely as long as          *
//*           credits are maintained          *
//* Visit [url=http://www.qiksearch.com/javascripts.htm]www.qiksearch.com/javascripts.htm[/url]   *
//*                    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.com"><font color="#FFFFFF" style="text-decoration:none">Contact</font></a></td><td bgcolor="#FFFFFF"></td><td align="middle"><a href="http://www.qiksearch.com"><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.com"><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.combo_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.com/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.com. Mail me at premshree@hotmail.com");
}

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>

VelMurugan · Apr 09, 2009, 12:54 PM

URL Option ComboBox

Code Select

<HTML>
<BODY>
<FORM name="f1"> 
<SELECT name="s1"> 
<OPTION SELECTED value="http://www.java2s.com">java2s.com
<OPTION value="http://www.perl.com">Perl.com
<OPTION value="http://www.java2s.com">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.java2s.com">java2s.com
<OPTION value="http://www.perl.com">Perl.com
<OPTION value="http://www.java2s.com">java2s.com
</SELECT> 
</FORM> 

</BODY>

</HTML>

VelMurugan · Apr 09, 2009, 12:55 PM

Show Selected Option items

Code Select

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

News:

Form Control - Option Select ComboBox