User Rated at:
Rate This:
Select a rating... 5 .. Best 4 3 .. Average 2 1 .. Worst

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 bgstyle="color:#99ccff">

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

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


    <tr bgstyle="color:#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

Comment By: M3SlVZ Hello! I'm Samuel Smith, i'm from Switqer on Sun 04th of May 2008 03:11:13 PM

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