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>

Navigation with Combo box and Java Script

Navigation with Combo box and Java Script

Navigation with Combo box and Java Script

Tutorials