Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials

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.


<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="../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">

<!--

function getit(){

newwindow=window.open("")

newwindow.location=document.testform.websites.options [document.testform.websites.selectedIndex].value;

}

//-->

</script>

</body>

Top



 

Page contents: itechies.net - learn how to create Combo Box(Drop-down link box),double combo,remote combo using javascript
javascript tutorial
javascript book
Buy this book