Populating a select options from another select options [Archive]

Click to See Complete Forum and Search --> : Populating a select options from another select options

vccarvalho

09-20-2003, 05:44 PM

Hi there, I'm trying to populate a select based on a selection made in another selection box (eg. user chooses which state(s) he can work, so in one side we have all states and the other, the states he wants to work)

My script looks like this :
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">


</SCRIPT>

I have 2 selects in my form, called side1 and side2. When I click, side2, for a millisecond or less, displays my selection and then ... returns to original state. Any suggestions?

Thanks

Khalid Ali

09-20-2003, 06:11 PM

I think you can get help from this resource

http://www.webapplikations.com/pages/html_js/forms/DropDownSelectCountryShowCities.html

vccarvalho

09-20-2003, 07:03 PM

nope. Thanks anyway. That page simply shows the content of one of the selects, what I need is to have parts of one of the selects inserted into the blank select.

Thanks

requestcode

09-20-2003, 08:25 PM

Here is an example I put together on the fly. It could probably be more efficient, but it does work.
<html>
<head>
<title>Populate Second Dropdown</title>
<script language="JavaScript">
function Populate(fldval,frmobj)
{
if(fldval!="")
{
flag="n"
len=frmobj.drop2.length // get length of second drop down
//alert(len)
for(i=0;i<len;i++) // check if already added
{
if(frmobj.drop2.options[i].value==fldval)
{flag="y"}
}
if(flag=="n") // if value not already added - add it
{frmobj.drop2.options[len]=new Option(fldval,fldval)}
}
}
</script>
</head>
<body>
<form name="myform">
<select name="drop1" onChange="Populate(this.value,this.form)">
<option value="">Select</option>
<option value="Michigan">Michigan</option>
<option value="Ohio">Ohio</option>
<option value="New York">New York</option>
</select>
<select name="drop2">
<option value="">States</option>
</select>
</form>
</body>
</html>

requestcode

09-20-2003, 09:55 PM

Here is the same one modified to remove them from the first dropdown.
<html>
<head>
<title>Populate Second Dropdown</title>
<script language="JavaScript">
function Populate(fldval,frmobj)
{
if(fldval!="")
{
len=frmobj.drop2.length // get length of second drop down
droplen=frmobj.drop1.length
droparr=new Array()
droparr.length=0
frmobj.drop2.options[len]=new Option(fldval,fldval)
for(a=0;a<droplen;a++)
{droparr[a]=frmobj.drop1.options[a].value}
frmobj.drop1.length=0
frmobj.drop1.options[0]=new Option("Select","")
count=1
if(droplen>1)
{
for(a=0;a<droplen;a++)
{
if(droparr[a]!="")
{
if(droparr[a]!=fldval)
{
frmobj.drop1.options[count]=new Option(droparr[a],droparr[a])
count++
}
}
}
}
}
}
</script>
</head>
<body>
<form name="myform">
<select name="drop1" onchange="Populate(this.value,this.form)">
<option value="">Select</option>
<option value="Michigan">Michigan</option>
<option value="Ohio">Ohio</option>
<option value="New York">New York</option>
</select>
<select name="drop2">
<option value="">States</option>
</select>
</form>
</body>
</html>

vccarvalho

09-22-2003, 03:30 PM

Thanks for all the code, I'll need to customize a little, once I'm going to use a select with multiple option enabled.
Now another one. I need to populate that from another frame, look at this piece of code, what the @#$@#$ is wrong?

formPos = top.frames[dstFrame].document.forms[dstForm];
var len = formPos.city.length;
formPos.city.options[len] = new Option("BH","BH");

Well, it says the method or property is not supported by the object. How come?

Thanks

Vinicius

vccarvalho

09-22-2003, 08:17 PM

never mind. It was a problem with IE 5.0X, when running on IE 5.5 or above, or Mozilla, it worked ok.

Thnx to all