Dynamic Select Populate 3

kevcold · Apr 5, 2002

Trying to code a dynamic population of a drop down menu (<SELECT><OPTIONS>) based on the selection of a previous drop down menu (same html page), with an onClick type Javascript event handler. Any suggestions out there?

Appreciate your help!
kevcold

RnK · Apr 6, 2002

Here is a striped down version of one I use

<head>
<script language="javascript" type="text/javascript">

</script>
</head>
<body>
<form name="Information">
<select name="state" onChange="populate()">
<option selected >Choose One</option>
<option value="New York">New York</option>
<option value="Ohio">Ohio</option>

</select>
<br />
<select name="city" disabled>
<option selected>Choose One</option>
</select>
</form>
</body>
</html>

The constructor for the Option object is defined as follows
new Option(text,value,defaultSelected,selected)

Where
text is the displayed text of the select box
value is the value submitted
defaultSelected is a boolean value to set the option
to the default selection if you don't specify it will default to false
selected is a boolean value used to select the option
if you don't specify it will default to false

Hope This Helps
RnK

kevinclark · Apr 6, 2002

Another stripped down version

<BODY onLoad = "init_page();">
<FORM NAME="F1">

<SELECT id="DD1"
name="DD1"
onChange = "fill_list(document.DD2_Array, document.F1.DD1[document.F1.DD1.selectedIndex].value, document.F1.DD2);">
</SELECT>
<SELECT id="DD2"
name="DD2">
</Select>
</form>
</Body>

<SCRIPT language = "JavaScript">

function init_page()
{
fill_list(document.DD1_Array, 0, document.F1.DD1, true);
fill_list(document.DD2_Array, document.F1.DD1[document.F1.DD1.selectedIndex].value, document.F1.DD2, false);
}

function fill_list(item_array, parent_item_id, output_select_list, init_flag)
{
output_select_list.length = 0;
for (x = 0; x < item_array.length; x++ )
{
if ( item_array[x] == parent_item_id || init_flag == true )
{
var option1 = new Option(item_array[x+1], item_array[x+2]);
output_select_list.options[output_select_list.length] = option1;
}
x+=2;
}
output_select_list[0].selected = true;
}

//The Arrays that hold the values to display
document.DD1_Array = new Array ('1', 'Value 1', '1',
'2', 'Value 2', '2');

document.DD2_Array = new Array('1', 'Sample 1', '1',
'1', 'Sample 2', '2',
'1', 'Sample 3', '3',
'1', 'Sample 4', '4',
'2', 'Sample 5', '5',
'2', 'Sample 6', '6',
'2', 'Sample 7', '7',
'2', 'Sample 8', '8',
'2', 'Sample 9', '9');

</SCRIPT>

kevcold · Apr 8, 2002

Thanks rnk and kevinclark, that'll get me over the hump!

Leozack · Dec 5, 2002

I've just spent hours trying to make a page that uses dynamic selection options, and most the problems I had were with my own stupid mistakes, like variable names starting with a number, doh ;P But here is THE SMALLEST amount of code to achive the job I have seen anywhere online, and for once I wrote it

Mine works fine, I knocked up this example in notepad ;P

Code:

<html>
<head>

<script language=&quot;javascript&quot;>
var a0 = new Array(&quot;&quot;);
var a1 = new Array(&quot;This&quot;, &quot;That&quot;, &quot;The Other&quot;);
var a2 = new Array(&quot;Something&quot;, &quot;Something Else&quot;);
var a3 = new Array(&quot;A bit&quot;, &quot;A bit more&quot;, &quot;Even more&quot;, &quot;Loads more&quot;, &quot;Heaps!&quot;);

// a0, a1 etc can be any names you want starting with letters

function SetOptions(the_select, the_array) {
	the_select.options.length = the_array.length;
	for (loop=0; loop < the_array.length; loop++) {
		the_select.options[loop].text = the_array[loop];
	}
}
</script>

</head>
<body>

<form name=&quot;formname&quot;>
<select name=&quot;selectbox1&quot; value style=&quot;width:153px&quot; onchange=&quot;SetOptions(formname.selectbox2, eval(formname.selectbox1.options[selectedIndex].value))&quot;>
<option name=&quot;&quot; value=&quot;a0&quot;></option>
<option name=&quot;Things&quot; value=&quot;a1&quot;>Things</option>
<option name=&quot;Somethings&quot; value=&quot;a2&quot;>Somethings</option>
<option name=&quot;Bits&quot; value=&quot;a3&quot;>Bits</option>
</select>
<select name=&quot;selectbox2&quot; value style=&quot;width:153px&quot;>
<option name=&quot;&quot; value=&quot;&quot;></option>
</select>
</form>

</body>
</html>

_________________________________
Leozack

Code:

MakeUniverse($infinity,1,42);

bittyboy · May 20, 2003

LeoZack or anyone else!

Once the select boxes are populated how do I assign a value to the 2nd select box that may be different than the display name?

example ::

<option value="22">White House</option>

Also having trouble submitting it's value.

u101440 · Jun 27, 2003

bittyboy

Did you manage to get this sorted. I've found another snippet that may be of use to you but I'm having a problem performing a sort on it an perhaps you could help?

Code:





<HEAD>

<SCRIPT LANGUAGE="JavaScript">


<!-- The JavaScript Source!!

http://javascript.internet.com

-->

<!-- Web Site:

http://www.berrysystems.com

-->

<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;

arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;

arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0

arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1

arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2

arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5

arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3

arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4

arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6

arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7

function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice&quot

{
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option&quot

;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option&quot

;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>

</HEAD>



<BODY>

<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
<option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="

http://javascriptsource.com">The

JavaScript Source</a></font>
</center><p>



The problem I'm having is on the second dropdown. I'm trying to sort it alphabetically rather than on the option value but as the arrays are seperate I appear to be having a problem.

Any advice from others is greatly appreciated.

sdi · Jun 28, 2003

Maybe this will help you with the sort.

var ppl=new array(5);
ppl[0] = 'Me';
ppl[1] = 'You';
ppl[2] = 'Them';
ppl[3] = 'Another';
ppl[4] = 'Us';

var sorted=ppl.sorted()

//Sorted would be an array that contained all
//variables in ppl array in alphabetical order

//Thus ppl[3] and sorted[0] would both = 'Another'

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dynamic Select Populate 3

kevcold

MIS

RnK

Programmer

kevinclark

Programmer

kevcold

MIS

Leozack

MIS

bittyboy

Programmer

u101440

Programmer

sdi

Technical User

Similar threads

Part and Inventory Search

Sponsor