Scribd
Upload
10 views3 pages

Exp 14

The document describes how to create pull-down menus using JavaScript. It provides instructions to create a basic static pull-down menu with options linking to different pages. It also demonstrates how to dynamically change the menu options depending on user selections, using arrays to populate the options. Example code is given to create a simple static pull-down menu and a menu that dynamically changes its subject options based on the semester selected. The conclusion states that all programs executed correctly with the right output.

Uploaded by

34 Vedant Lad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views3 pages

Exp 14

The document describes how to create pull-down menus using JavaScript. It provides instructions to create a basic static pull-down menu with options linking to different pages. It also demonstrates how to dynamically change the menu options depending on user selections, using arrays to populate the options. Example code is given to create a simple static pull-down menu and a menu that dynamically changes its subject options based on the semester selected. The conclusion states that all programs executed correctly with the right output.

Uploaded by

34 Vedant Lad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Experiment No.

14
Aim: Develop a web page for implementing menu.
Theory:
Creating a Pull-Down Menu:
A pull-down menu is used to make it easy for visitors to navigate a complex web site.The menu can reflect a
common theme among web pages, and each menu option can have a web page/function associated with it.

You can use JavaScript to load the selected page when any option from menu is selected by the visitor.
1. Create a menu with <select> tag and add options to it using <option> tag.
2. Specify url of web page to be opened when an option is selected by visitor, in value property of <option> tag.
<select name="MenuChoice" onchange="DisplayPage(this)">
<option>Products</option>
<option value="page2.html">Computers</option>
<option value="page3.html">Monitors</option>
</select>
3. Call function using onchange event in <select> tag.
<select name="MenuChoice" onchange="DisplayPage(this)">
This pointer is passed as parameter that represents menu control(selected option).
4. Define function body inside <script> tag.
<script type="text/javascript">
function DisplayPage(Choice)
{
Page = Choice.options[Choice.selectedIndex].value;
if (Page != "")
{
window.location = Page;
}}
</script>
Location property stores address of web page to be opened once an option is selected from menu.

Dynamically changing a menu:


A pull-down menu can be a context-sensitive menu that is, the set of options dynamically change based on
choices the visitor makes on the page. In this way, one menu can be used to display different sets of options,
reducing the need to show too many menus on a web page.

Programs: Creating a simple pull down menu


<html> Output:
<head>
<title>Pull Down Menu</title>
<script type="text/javascript">
function DisplayPage(Choice)
{
Page = Choice.options[Choice.selectedIndex].value;
if (Page != "")
{
window.location = Page;
}}
</script>
</head>
<body onload="document.Form1.MenuChoice.selectedIndex=0">
<form action="" name="Form1" >
<select name="MenuChoice" onchange="DisplayPage(this)">
<option>Products</option>
<option value="page2.html">Computers</option>
<option value="page3.html">Monitors</option>
</select>
<h1> Hello, Welcome to products</h1>
</form>
</body>
</html>

Program: for creating dynamically changing menu


<html> Output:
<head>
<title>Dynamically Changing Menu Options</title>
<script type="text/javascript">
fifthsem = new Array('CSS','AJP','OSY'); // Array elements for
subject menu if sem fifth is selected
sixthsem = new Array('PHP','MAD', 'ETI'); // Array elements for
subject menu if sem sixth is selected

function Getsubjects(Semester)
{
for(i=document.Form1.subjects.options.length-1;i>0; i--)
{
document.Form1.subjects.options.remove(i) //Clear existing
options from subjects
}
semvalue = Semester.options[Semester.selectedIndex].value; //
finding selected semester from sem menu
if (semvalue != "")
{
if (semvalue == '1')
{
for (i=1; i<=fifthsem.length;i++)
{
document.Form1.subjects.options[i] =new Option(fifthsem[i-1]);
// loading options from array into subjects menu for fifth sem
}
}
if (semvalue == '2')
{
for (i=1; i<=sixthsem.length;i++)
{
document.Form1.subjects.options[i] =new Option(sixthsem[i-1]);
// loading options from array into subjects menu for sixth sem
}
}
}
}
</script>
</head>
<body onload="document.Form1.Semester.selectedIndex=0">
<form name="Form1">
<select name="Semester" onchange="Getsubjects(this)"> // First
menu as semester
<option value="0">Semester</option>
<option value="1">Fifth</option>
<option value="2">Sixth</option>
</select>

<select name="subjects"> // Second menu as subjects


<option value="0">Subjects</option>
</select>
<br>
<p>
<input type="submit" value="Submit" />
<input type="reset" />
</p>
</form>
</body>
</html>

Conclusion:
With all the concepts based on crating menu , successfully executed all programs with correct output.

You might also like