...

View Full Version : populating dropdown



chelvis
12-23-2003, 03:58 PM
I have 3 radio buttons named "search" "browse" "exact match" and one dropdown. The dropdown menu will have "Title" "author" "ISBN" "keyword".

If the user selects the "search" radio button, then only the "Keyword" should appear in the dropdown.
If the user selects "browse" in the radio button then "author" and "Title" should appear in the drop down menu.
If the user selects "exact match" from the radio button then "ISBN" should appear in the dropdown menu.

How can I do this with the javascript?

requestcode
12-23-2003, 06:02 PM
Here is an example that I wrote a long time ago. It probably coud be done more efficiently.
<html>
<head>
<title>Dropdown create</title>
<script language="JavaScript">
NS = document.layers? 1:0;
function populate()
{
if(document.myform.chk[0].checked)
{
document.myform.selectTest2.length=3
option0=new Option("Barn Red", "Barn Red", true, true)
option1=new Option("Dark Red", "Dark Red")
option2=new Option("Light Red", "Light Red")
}
if(document.myform.chk[1].checked)
{
document.myform.selectTest2.length=2
option0=new Option("Dark Green", "Dark Green", true, true)
option1=new Option("Light Green", "Light Green")
}
var num=document.myform.selectTest2.length

for (var i=0; i<num; i++)
{
eval("document.myform.selectTest2.options[i]=option"+i)
}
if (NS)
{
history.go(0)
}
}
</script>
<body>
<form name="myform">
<input type="radio" name="chk" onClick="populate()">Option A
<input type="radio" name="chk" onClick="populate()">Option B
<br>
<select name="selectTest2" size="1"></select>
</form>
</body>
</html>

chelvis
12-23-2003, 08:50 PM
Thank you very much for sharing the code. But unfortunately I have to populate 3 dropdowns with each radio click with the same values.

I wrote for 2 dropdowns but I am getting an error like "object method is not supported". Can some one help me?

<html>
<head>
<title>Dropdown create</title>
<script language="JavaScript">
NS = document.layers? 1:0;
function populate()
{
if(document.myform.chk[0].checked)
{
document.myform.selectTest2.length=3
document.myform.test2.length=3
option0=new Option("Title", "Title", true, true)
option1=new Option("Dark Red", "Dark Red")
option2=new Option("Light Red", "Light Red")
}
if(document.myform.chk[1].checked)
{
document.myform.selectTest2.length=2
document.myform.test2.length=2
option0=new Option("Dark Green", "Dark Green", true, true)
option1=new Option("Light Green", "Light Green")
}
if(document.myform.chk[2].checked)
{
document.myform.selectTest2.length=2
document.myform.test2.length=2
option0=new Option("ISBN", "ISBN", true, true)
option1=new Option("Author", "Author")
}

var num=document.myform.selectTest2.length


for (var i=0; i<num; i++)
{
eval("document.myform.selectTest2.options[i]=option"+i)
}
var num=document.myform.test2.length
for (var i=0; i<num1; i++)
{
eval("document.myform.test2.options[i]=option"+i)
}

}
</script>
<body onload="populate()">
<form name="myform">
<select name="selectTest2" size="1"></select>
<br><br>
<select name="test2" size="1"></select>
<br><br>
<input type="radio" name="chk" checked onClick="populate()">Option A
<input type="radio" name="chk" onClick="populate()">Option B
<input type="radio" name="chk" onClick="populate()">Option C
<br>

</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum