how to use javascript Combo Box

Javascript - Combo Box (Drop down link box):

combo with button	Combo with image as button	combo without button
load in new window	Double combo	Combo Remote Control
combo box & frame

The combo box is basically an HTML INPUT of type text and HTML SELECT grouped together to give you a combo box functionality. Combo box (select box) is an excellent way to give access to multiple pages without using up lots of screen-space.

how do we create the combo box?

You can use JavaScript's Select Object which is a property of the form object.Here's the code for creating combo box. The Option object(s) appear inside it as in the following code:
<SELECT NAME="food" SIZE=0>
<OPTION VALUE="0">
<OPTION VALUE="1">Pizza
<OPTION VALUE="2">Burger
<OPTION VALUE="3">Rice
</SELECT>

It looks like:

Combo Box (Drop down link box) with a button : Do you want to load a page after selecting the item from the list? The following javascript is an example for combo box with button. After selecting from the list box, click on the button.

<form name="testform">
                    <select name="websites" size="1">
                    <option selected value="http://www.cnn.com">CNN</option>
                    <option value="http://www.msnbc.com">MSNBC</option>
                    <option value="http://www.excite.com">EXCITE</option>
                    </select>
                    <input type="button" value="Get it!"
                    onClick="location=document.testform.websites.options
                    [document.testform.websites.selectedIndex].value">
</form>

Top

Comb Box(Drop down link box) with image as button

Do you want your combo box to look better?? You can create a combo box that uses an image as the go button (instead of the standard form button).

Insert the below into the <body> section of your page.

<form name="testform">
                    <select name="websites" size="1">
                    <option selected value="http://www.cnn.com">CNN</option>
                    <option value="http://www.msnbc.com">MSNBC</option>
                    <option value="http://www.excite.com">EXCITE</option>
                    </select>
<a href="JavaScript:loadurl()"><img src="../images/go3.gif" width="23" height="19" border="0" ></a>
</form>

Top

Combo without(Drop down link box) button
You can activate the link automatically, without the use of the 'Go' button with the combo box.A combo link box that goes to the specified URL simply by selecting it.
<form name="testform">
                    <select name="websites" size="1"
onChange="window.location=document.testform.websites.options[document.testform.websites.selectedIndex].value">
                    <option selected value="http://www.yahoo.com">YAHOO</option>
                    <option value="http://www.cnn.com">CNN</option>
                    <option value="http://www.excite.com">EXCITE</option>
                    </select>
</form>

Top

Combo Box (Drop down link box)and frames

Do you want a combo box script that loads the target URL in another frame? For example, If the dropdown box is on left frame and we want to load the selected page on the right frame,
instead of window.location write "parent.right_frame.location= ".
Top

Load webpage in new window: Do you want to load the selected pages in new window? The following javascript code in an example.

<body>
<form name="testform">
                    <select name="websites" size="1">
                    <option selected value="http://www.msnbc.com">msnbc</option>
                    <option value="http://www.cnn.com">CNN</option>
                    <option value="http://www.excite.com">EXCITE</option>
                    </select>
                    <input type="button" value="Get it!" onClick="getit()">
                   </form>
<script language="javascript">

</script>
</body>

Top