Home Javascript Navigation with Combo box and Java Script

Related Tutorials


 
 

Share on Google+Share on Google+

Navigation with Combo box and Java Script

Advertisement
In this article you learn the basics of JavaScript and create your first JavaScript program.

Navigation with Combo box and Java Script

     

In this article you learn the basics of JavaScript and create your first JavaScript program.

What is JavaScript in Navigation with Combo box?
 JavaScript is a 2-level combo box menu script. Organize and compact categories into link, all displayed using just one selection box. The navigation that requires absolutely no DHTML or Javascript experience. It is creates any cross-browser, popup or drop-down menu that works alike in all browsers supporting DHTML and in all platforms. The navigation DHTML/JavaScript menus are designed with a treelike approach. Users can tailor their menu by using the Properties Pane or by choosing a predefined appearance from the Style Gallery. The menu can be either vertical or horizontal, that can be movable, stay visible while scrolling, contain static or animated images, borders, colors, and much more. Once everything is set, you can use the insert-menu-into-Web-page command to add  menu in the Web page in a fast and easy manner without any code. 

Example:

<html> 
<head>
<body>
<form name="frmdesilt">
<head> 
<title>Insert Table col using DOM</title> 
<script language="javascript"> 
function addcol() 

var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0]; 
var col = document.createElement("TR"); 
var cell1 = document.createElement("TD"); 
var inp1 = document.createElement("INPUT"); 
var combo1=document.createElement("select");
var combo11=document.createElement("option");
var combo12=document.createElement("option");
var combo2=document.createElement("select");
var combo21=document.createElement("option");
var combo22=document.createElement("option");
var inp2=document.createElement("INPUT"); 
var inp3=document.createElement("INPUT"); 
inp2.setAttribute("type","text");
inp2.setAttribute("value","no");
inp2.setAttribute("size","4");
inp3.setAttribute("type","text");
inp3.setAttribute("value","amount");
inp3.setAttribute("size","10");
combo1.setAttribute("name","cmbgroup");
combo1.setAttribute("onChange","redirect(this.option.selectedIndex)");
combo11.setAttribute("value","Japan1");
combo11.innerHTML="india--";

combo12.setAttribute("value","kanpur1");
combo12.innerHTML ="kanpur--";
combo2.setAttribute("name","cmbitem");
combo21.setAttribute("value","patna");
combo21.innerHTML="patna--";
combo22.setAttribute("value","Bangolor");
combo22.innerHTML="Bangolor--";
combo1.appendChild(combo11);
combo1.appendChild(combo12);
combo2.appendChild(combo21);
combo2.appendChild(combo22);
var cell2 = document.createElement("TD"); 
cell2.appendChild(combo1);
var cell3 = document.createElement("TD"); 
cell3.appendChild(combo2);
var cell4 = document.createElement("TD"); 
cell4.appendChild(inp2);
var cell5 = document.createElement("TD"); 
cell5.appendChild(inp3);


col.appendChild(cell2);
col.appendChild(cell3);
col.appendChild(cell4);
col.appendChild(cell5);

tbody.appendChild(col); 
}
</script> 
</head> 
<body> 
<input type="button" value="Add col" size="-6" onClick="addcol();"> 
<table id="table1"> 
<tbody> 
<tr>
<th>country-name</th>
<th>Item-Name</th>
<th>Number</th>
<th>Total Amount</th>
</tr>
<tr> 
<td><select name="group">
<option>india--</option>
</select>
</td> 
<td><select name="item">
<option>calcuta--</option>
</select>
</td> 
<td>
<input type="text" size="4">
</td>
<td>
<input type="text" size="10">
</td>
</tr> 
</tbody> 
</table> 
</form>
</body> 
</html> 

 

     

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: December 19, 2008

Related Tutorials

Discuss: Navigation with Combo box and Java Script   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:1
niraj kumar singh
July 20, 2012
navigation with combobox using javascript

please describe all the related function ,properties name wih his functionality eg... what is createELEMENT();
DMCA.com