Home >> Tutorials >> Javascript tutorials
| 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>
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.
<script>
function loadurl()
{
window.location=document.testform.websites.options
[document.testform.websites.selectedIndex].value}
</script>
<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="tutorial_images/images/go3.gif" width="23" height="19" border="0" ></a>
</form>
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>
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”>
<!–
function getit(){
newwindow=window.open(“”)
newwindow.location=document.testform.websites.options [document.testform.websites.selectedIndex].value;
}
//–>
</script>
</body>