JavaScript Program to Change Option List Dynamically
Write a html script which displays 2 radio buttons to the users for fruits and vegetable and 1 option list. When user select fruits radio button option list should present only fruits names to the user & when user select vegetable radio button option list should present only vegetable names to the user.
Source Code
<html>
<head>
<title>Change option list dynamically</title>
<script>
function updateList(elem)
{
with(document.forms.contact)
{
if(elem == 1)
{
list2[0].text = "Apple"
list2[0].value = "1"
list2[1].text = "Banana"
list2[1].value = "2"
list2[2].text = "Orange"
list2[2].value = "3"
list2[3].text = "Pineapple"
list2[3].value = "4"
list2[4].text = "Mango"
list2[4].value = "5"
}
if(elem == 2)
{
list2[0].text = "Cauliflower"
list2[0].value = "1"
list2[1].text = "Broccoli"
list2[1].value = "2"
list2[2].text = "Ladyfinger"
list2[2].value = "3"
list2[3].text = "Cabbage"
list2[3].value = "4"
list2[4].text = "Mushroom"
list2[4].value = "5"
}
}
}
</script>
</head>
<body>
<form name="contact">
<p>
Select Fruits/vegitables
<select name="list1" onchange="updateList(this.value)">
<option value="1">Fruits
<option value="2">Vegitables
</select><br/><br/>
Your options are
<select name="list2">
<option value="1">Apple
<option value="2">Banana
<option value="3">Orange
<option value="4">Pineapple
<option value="5">Mango
</select>
<br/><br/>
</form>
</body>
</html>
Output
