Not a Member Yet,
Click here to Register
How do you like the new design?






ID: 498
Viewed: 8939
Added: Nov 04, 2002
Version: 1.0 - php4
Snippet uploaded by: snippet
Written By: snippet
Demo: Sorry, no demo



User Rated at: 3 Stars3 Stars3 Stars
Rate This:

Thank you for your vote. Please wait...

It appears you already voted for this snippet

It appears your vote value was empty

Well this could actually go to the serverside language but I thought it would be better suited here. This script is pretty cool and came in handy for me so I thought I would share it.

It loads data from Mysql and puts the info into arrays for javascript to use in 2 select boxes. So when you pick one category in the first box the second box changes according to what you selected.

Just change the mysql info for the categories and tables you want to select. It works best if you have more than one category to choose from. Here is one way of doing it:

in the DB: -Categories-

catid | catname | catfatherid
1 | cats | 0
2 | dogs | 0
3 | mice |1
4 | tennis ball |2
5 | cat food |1
6 | dog food | 2

See how the catfatherid is linked between the fields?

just changing the mysql stuff in this script is all you should do, if you start to change the other stuff then you risk a chance of making the script stop working, make changes only if you know what you are doing.

no warrenty provided, use at your own risk.

Browsers: IE5+, NS4.7+, NS6+, NS7+, Opera6+, Mozilla1+

<!---Head--->


<?
mysql_connect ("localhost","username","password");
mysql_select_db ("dbname");
$sql = "SELECT * FROM Categories where catfatherid = '0'";
$result = mysql_query ($sql);

echo"<script>n";
echo"var mmMk = new Array();n";
echo"var mmMd = new Array();n";
while ($row = mysql_fetch_array($result)) {
echo"mmMk[".$row["catid"]."] = '".$row["catname"]."#".$row["catname"]."';n";
}
$sql3 = "SELECT * FROM Categories where catfatherid = '0'";
$result3 = mysql_query ($sql3);
while ($row = mysql_fetch_array($result3)) {
$catid = $row["catid"];
$catname = $row["catname"];

$sql2 = "SELECT * FROM Categories where catfatherid= '$catid'";
$result2 = mysql_query ($sql2);
echo"mmMd['$catname'] = '";
while ($row2 = mysql_fetch_array($result2)) {
echo" ".$row2["catname"]."#".$row2["catname"].",";
}
echo"';n";
}

echo"</script>n";

?>
<script>

function mmInitialize(parent, category, sub, make_caption, model_caption, bnew)
{
var rgMake;

clearList(parent.mmCategory);
addElement(parent.mmCategory, make_caption, 0);

if (bnew == 'true')
{
for (var i = 0; i < mmMk.length; i++)
{
if (mmMk[i])
{
rgMake = mmMk[i].split('#');
addElement(parent.mmCategory, rgMake[0], rgMake[1]);
}
}
}
else
{
for (var i = 0; i < mmMk.length; i++)
if (mmMkU[i])
{
rgMake = mmMk[i].split('#');
addElement(parent.mmCategory, rgMake[0], rgMake[1]);
}
}

if (category)
{
setDefaultByText(parent.mmCategory, sub);
mmChangeMake(parent, bnew, model_caption);
if (sub)
setDefaultByText(parent.mmSubs, sub);
}
else
{
parent.mmCategory.selectedIndex = 0;
mmChangeMake(parent, bnew, model_caption);
}
}


function mmChangeMake(parent, bnew, model_caption)
{
if (bnew == 'true')
var ModelList = mmMd[parent.mmCategory.options[parent.mmCategory.selectedIndex].value];
else
var ModelList = mmMd[parent.mmCategory.options[parent.mmCategory.selectedIndex].value];

clearList(parent.mmSubs);
addElement(parent.mmSubs, model_caption, 0);
if(ModelList)
{
var rgSubs = ModelList.split(',');
for (var i = 0; i < rgSubs.length; i++)
{
if (rgSubs[i])
{
var rgModel = rgSubs[i].split('#');
addElement(parent.mmSubs, rgModel[0], rgModel[1]);
}
}
parent.mmSubs.disabled = false;
}
else
{
parent.mmSubs.disabled = true;
}

parent.mmSubs.selectedIndex = 0;
}


</script>

<script>

/*
REM JavaScript functions for client-side manipulation of HTML listboxes.
REM Works on both NetScape (4.0+) and IE (4.0+).
REM Look at sourcemiscymmbuild.asp for an example of how to use these functions.
*/
function clearList(list)
{
var i = 0;
var o = list.options;

for (i = o.length; i >= 0; --i)
o[i] = null;
list.disabled = true;
}


function addElement(list, text_in, value_in)
{
var o = list.options;
var nIdx;
if (o.length < 0) //IE for Mac 4.5 sets length to -1 if list is empty
nIdx = 0;
else
nIdx = o.length;

o[nIdx] = new Option(text_in, value_in);
list.disabled = false;
}


function setDefaultByText(list, text_in)
{
with (list)
{
for (var i = 0; i < (options.length); i++)
{
if (options[i].text == text_in)
{
selectedIndex = i;
return;
}
}
}
}


function setDefaultByValue(list, value_in)
{
with (list)
{
for (var i = 0; i < (options.length); i++)
{
if (options[i].value == value_in)
{
selectedIndex = i;
return;
}
}
}
}


</script>

<!---Body--->


 
<?
if ($_REQUEST[submit]){
echo"You piked:<br>";
echo"<br>Category: ".$_REQUEST['mmCategory']." ";
echo"<br>Sub: ".$_REQUEST['mmSubs']." ";
exit;
}
?>

<form name="Form2" id="Form2" action="<?= $_SERVER[SCRIPT_NAME] ?>">
<table>
<tr bgcolor="#99ccff">

<td>
<select name="mmCategory" disabled onChange="mmChangeMake(document.Form2, 'true', 'Sub');">

<option value="0">Category</option>
</select>
</td>
</tr>


<tr bgcolor="#99ccff">

<td>
<select name="mmSubs" disabled>
<option value="0">Sub</option>
</select>
</td>

</tr>

</table>
<input type=submit name=submit value=push>
</form>

<script>

mmInitialize(document.Form2, '', '', 'Category', 'Sub', 'true');
</script>


Subject: Samuel
[ Reply ]
Comment By: M3SlVZ Hello! I\'m Samuel Smith, i\'m from Switqer on 04th of May 2008 06:11 AM

M3SlVZ Hello! I'm Samuel Smith, i'm from Switqerland i and find your site really brilliant!


Please completely fill out the form below if you want to review this snippet. All reviews are subject to validation.


Replying to a Comment...


Adding your comment. Please wait...

Thanks for adding your comment!. After further review it will be added.

There was a problem adding your comment. Please try again.

Please complete all the fields in the form before sending.

© 2002 - 2017 snippetlibrary.com All Rights Reserved. Conditions