PDA

View Full Version : Forms: Select options, filtered by another select option



koolsamule
12-15-2009, 05:41 PM
Hey chaps, hope someone can help with this:
I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables:
// tbl_main_colour:


ID, NAME
1, Red
2, Blue
3, Green

// tbl_shade_colour:


ID, NAME, FK_MAIN_COLOUR_ID
1, Light Red, 1
2, Dark Red, 1
3, Light Blue, 2
4, Dark Blue, 2
5, Light Green, 3
6, Dark Green, 3

What I'm after is something to filter the second select option, after the first select option has been chosen
// Select 1:

Red

// Select 2:

Light Red
Dark Red

I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated.

Old Pedant
12-15-2009, 10:27 PM
Depends on how many records there are in your tbl_shade_colour table.

If a handful to dozens to maybe even a few hundred, you can set it all up at page load time (with help from PHP) and then let JS do the work.

But if you have thousands or tens of thousands, then you will want to use AJAX to load in the proper set of shades.

More details, please.

asamaiya
12-15-2009, 10:44 PM
In simple word is this what u want



<html>
<head>
<script language="javascript">
function setOptions(o)
{
var select2 = document.form1.select2;
select2.options.length = 0;
if (o == "1")
{
select2.options[select2.options.length] = new Option('Apple');
select2.options[select2.options.length] = new Option('Pear');
}
if (o == "2")
{
select2.options[select2.options.length] = new Option('Carrot');
select2.options[select2.options.length] = new Option('Potatoe');
}
if (o == "3")
{
select2.options[select2.options.length] = new Option('Chicken');
select2.options[select2.options.length] = new Option('Fish');
}
}
</script>
</head>
<body>
<form name="form1">
<select name="select1" size="1" onChange="setOptions(document.form1.select1.options[document.form1.select1.selectedIndex].value);">
<option value="1">Fruit</option>
<option value="2">Vegetable</option>
<option value="3">Meat</option>
</select>
<br />
<br />
<select name="select2" size="1">
<option>Apple</option>
<option>Pear</option>
</select>

</form>

</body>
</html>

Old Pedant
12-15-2009, 11:25 PM
Asamiya's code works, of course, but it's big and ugly and would be hard to drive from PHP.

Oh, w.t.h. I'll show you a simple example.

Back soon.

Old Pedant
12-16-2009, 12:08 AM
Here, working. See the part in red for what you have to dump in via PHP. Should be trivial.


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

// constructor for a shade object:
function shade( sid, name, mid )
{
this.mainid = mid;
this.shadeid = sid;
this.shadeName = name;
}

var shades = [
/* this data would all be generated by PHP */
new shade( 1, "Light Red", 1 ),
new shade( 2, "Dark Red", 1 ),
new shade( 3, "Light Blue", 2 ),
new shade( 4, "Dark Blue", 2 ),
new shade( 5, "Light Green", 3 ),
new shade( 6, "Dark Green", 3 ),
/* end of PHP generated data */
null ];

function changeColour( coloursel )
{
var mainid = parseInt( coloursel.options[coloursel.selectedIndex].value );
var form = coloursel.form;

// first, wipe out the shades select
for ( var s = form.Shades.options.length - 1; s > 0; --s )
{
form.Shades.options[s] = null;
}
// then fill in the new shades:
for ( var n = 0; n < shades.length-1; ++n )
{
var sobj = shades[n];
if ( sobj.mainid == mainid )
{
form.Shades.options[form.Shades.options.length] =
new Option( sobj.shadeName, sobj.shadeid );
}
}
}
</script>
</head>
<body>
<form>
<select name="Colours" onchange="changeColour(this);">
<option value="0">--choose a colour--</option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select name="Shades">
<option value="0">--choose colour then shade--</option>
</select>
</form>
</body>
</html>