PDA

View Full Version : Dynamic Dropdown

APuppyDog
07-23-03, 05:19 PM
Is it possible to have this functionality with javascript?

I would like 2 'dropdowns' The first drop down would have two selections, United States and All Other Countries.

If United States is selected from the first drop down, then the second dropdown will automatically be populated with the states, however if All Other Countries is selected than a text box will appear in place of a dropdown.

I think if i can get that code than i could do some other things I am thinking of but this would help me out a lot.. thanks for the help in advance!
Cagez
07-25-03, 04:12 PM
Something like this?

<html>
<head>
<script language="javascript">
function showField()
{
var choice = document.formname.drop1.options[document.formname.drop1.selectedIndex].value;

if(choice == "US")
{
document.all['other-div'].style.display = "none";
document.all['US-div'].style.display = "";
}

else if(choice == "other")
{
document.all['other-div'].style.display = "";
document.all['US-div'].style.display = "none";
}

else
{
document.all['other-div'].style.display = "none";
document.all['US-div'].style.display = "none";
}
}
</script>
</head>
<body>

<form name="formname">
<select name="drop1" onchange="showField()">
<option value="pleasechoose" selected>- Please Choose -
<option value="US">US
<option value="other">Other
</select>

<br><br>

<div style="position: absolute; display: none" name="US-div" id="US-div">
<select name="US-states">
<option>Option 1
<option>Option 2
<option>Etc...
</select>
</div>

<div style="position: absolute; display: none" name="other-div" id="other-div">
<input type="text" name="textbox">
</div>

</form>

</body>
</html>
APuppyDog
07-25-03, 04:21 PM
precisely! Thank you so much. Now i have to implement it in my site.. although the states list is called from a database so i may get stuck again. BUt this is exactly what i was talking about, thanks again! I may post the above solution on another board, how can i give you credit?
Cagez
07-25-03, 04:29 PM
Credit? Sweet ;) You could link to my forums: http://forums.devbox.net

(Main site is due to launch in a little bit)
j555
11-14-03, 12:06 PM
The code provided was great. Thank you very much. Is there a way to alter the code so that I can use PHP to put a list in the first pulldown gathered from a database and than use that list to filter the second pull down based upon the selection in the first drop down. The second drop down will be populated from another table in the database. Thank you in advance for your help.
jsjohnst
11-17-03, 04:00 PM
Here is the code you will need to make the second dropdown dynamically populate from the selected value of the first dropdown.
You will need to figure out the code to dynamically generate the two lists yourself. There are hundreds of ways to do it, and most are
specific to how you program. I use ADOdb and Smarty, so the approach I would use probably wouldn't work well for you. None the less,
this should get you started.


<script>
<!--

var groups=3; // Number of countries + 1
var group=new Array(groups);

for (i=0; i<groups; i++) {
group[i]=new Array();
group[i][0]=new Option("---Please select a location---"," ");
}

// Dynamic list #1
// loop for each of your locations
// country_id must be the same value from your country select list
// state_id below should be numerically ordered from 1-?? without any missing numbers
// group[country_id][state_id]=new Option("option_name","option_value");
group[1][1]=new Option("Alaska","1");
group[1][2]=new Option("Arizona","2");
group[1][3]=new Option("Arkansas","3");
group[1][4]=new Option("Wyoming", "50");
group[2][1]=new Option("Ontario","1");
group[2][2]=new Option("Alberta","3");

function populate_options(x) {
var formfield=document.product_form.product_add_locati on_id;
for(m=formfield.options.length-1;m>0;m--)
formfield.options[m]=null;
for(i=0;i<group[x].length;i++) {
formfield.options[i]=new Option(group[x][i].text,group[x][i].value);
}
formfield.options[0].selected=true;
}

//-->
</script>

// Dynamic list #2
// loop for each of your countries
<select NAME="country" onChange="populate_options(this.options.selectedIndex)"><option value=" " selected>---Please select a country---</option>');
<option value="1">United States</option>;
<option value="2">Canada</option>;
</select>

<select NAME="location"><option value=" " selected>---Please select a location---</option></select>
dnelaon1969
11-08-04, 01:27 PM
Any chance that someone knows how to add a 3rd dropdownlist that is dependent on the selection of the second? i.e. Country, State, City? I tried using this code to do it and after a little fine-tuning, the first two work fine. The problem is, this works by comparing the selected index of the first item and getting THAT array. For the third dropdown list, the selected index will not work because the index for "Alaska" and "Ontario" would be the same.

All of my items in all 3 lists have unique IDs so if I could do the third list based on the selected value of the second, that might work.

Thanks,
Dan
dnelaon1969
11-08-04, 02:32 PM
Ha! I got it. Instead of creating the third array in sequential order, it end up looking something like this:

pagers[189]=new Array();
pagers[189][0]=new Option('---','');
pagers[189][1]=new Option('(330) 789-6541','9');
pagers[198]=new Array();
pagers[198][0]=new Option('---','');
pagers[198][1]=new Option('123','10');


And then instead of passing in the selectedIndex, I just pass the second dropdown as an object

populatePagers(this, 'ddlPagers')


And the populatePagers function is:


function populatePagers(x, elementName) {
var indexnumber=0;
with(x)
{
for(i=0; i<options.length; i++)
{
if(options[i].selected==true)
{
indexnumber=options[i].value
i=options.length;
}
}
}
if (indexnumber > 0)
{
var bIsDOM = (document.getElementById) ? true : false;
var bIsIE4 = (document.all && !document.getElementById) ? true : false;
var bIsNN4 = (document.layers) ? true : false;
if (elementName.length != 0) {
var oElement = null;
if (bIsDOM){oElement = document.getElementById(elementName);}
else if (bIsIE4) {oElement = document.all[elementName];}
else if (bIsNN4) {oElement = document.layers[elementName];}
if (oElement != null) {
for(m=oElement.options.length-1;m>0;m--){
oElement.options[m]=null;
}
for(i=0;i<pagers[indexnumber].length;i++) {
oElement.options[i]=new Option(pagers[indexnumber][i].text,pagers[indexnumber][i].value);
}
oElement.options[0].selected=true;
}
}
}
}


And now everything works great!
jsjohnst, thanks for the original code that helped me get started.
Dan