chained listboxes 1

[dongbamage]

I would like a category listbox which is populated from my db, when I select a category I would like my subcategory lisbox to be dynamically populated from my db based upon which category was chosen.

I then would like my subsubcategory listbox to be dynamically populated from my db based upon which subcategory was chosen.

and then I then would like my subsubsubcategory listbox to be dynamically populated from my db based upon which subsubcategory was chosen.

I'm a noob to javascript so I'm finding this difficult, I have searched and searched but can only seem to find scripts for non db based listboxes that update each other...

please help!!!!

I'm going insane!

 

[chessbot]

Javascript cannot directly access a database. You would have to reload the page, open a new window and obtain information from it, set the src of an iframe or embedded xml document, etc. If you need help with this, post back.

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation

 

[checkai]

I use this control with ASP.Net...but I'm not sure what you're programming with other than Javascript...

http://metabuilders.com/Tools/ListLink.aspx

 

[chessbot]

I don't know asp.net, but the best way that I could see for doing this is loading all the possible values into the page and then using javascript for updates. This is unfeasable if their are many records, though.

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation

 

[ggriffit]

check out

http://www.greggriffiths.org/webdev/clientside/javascript/linkeddropdowns/

 

[FALCONSEYE]

as checkai mentioned, it all depends on what type of server side programming you use. I did the same thing using Cold Fusion with Javascript. First, I get everything and load them to a variable. Second, I loop thru the result set to find out the related values for the second list and so on. At the end, i have four related selects. One thing to mention is that if you have a huge result set it will be very slow.

 

[dongbamage]

hey guys thanls for all the replies!

Ok I'm using php and mysql to access the db.

here is my attempt so far (which doesn't work):

<?

$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID = 0 AND Name <>'Top'";
$result=mysql_query($sql) or die ("dead");
while($row=mysql_fetch_array($result))
{

$Catarray[$Catarraycount]=$CategoryID;
$Catarraycount++;
$Catarray[$Catarraycount]=$Name;
$Catarraycount++;
}


$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID <>0 and SubSubCat =0";
$result=mysql_query($sql) or die ("dead");
$SubCatarraycount=0;
while($row=mysql_fetch_array($result))
{
$CategoryID=$row["CategoryID"];
$Name=$row["Name"];
$SubCatarray[$SubCatarraycount]=$CategoryID;
$SubCatarraycount++;
$SubCatarray[$SubCatarraycount]=$Name;
#echo ("<a href='?Prodlink=ProductShow?id=$StockID'>".
#"<img src='$image'> </a>");
$SubCatarraycount++;

}


?>
<script language="javascript">
<!--
var Categories = new Array(2);
Categories= new Array('<?=implode("\",\"", $SubCatarray); ?>');
var SubCategories= new Array(2);

SubCategories=new Array('<?=implode("\",\"", $Catarray); ?>');


function populate(make)
{
var x = make;
while (document.forms[0].model.options.length)
{
document.forms[0].model.options.remove(0)
}
for (var i=0;i<SubCategories[x].length;i++)
{
newOpt = document.createElement("OPTION");
newOpt.text = SubCategories[x];
document.forms[0].model.options.add(newOpt)
}
}
-->
</script>

<form name="test">
<select name="make" onChange="populate(this.options[this.selectedIndex].value)">
<?

$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID = 0 AND Name <>'Top'";
$result=mysql_query($sql) or die ("dead");
if ($row =@mysql_fetch_array($result)){

while($result2=mysql_fetch_array($result))
{
echo '<option value="'.$result2[0].'">'.$result2[1].'</option>\n';
}
}
?>
</select>


<select name="model"></select>
</form>

 

[chessbot]

<?

$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID = 0 AND Name <>'Top'";
$result=mysql_query($sql) or die ("dead");
$mainselect = array();
while($row=mysql_fetch_assoc($result))
{
  $temp = array( 
"value" => $row['CategoryID'],
"text" => $row['Name'];
);
  $mainselect[] = $temp;
}    


$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID <>0 and SubSubCat =0";
$result=mysql_query($sql) or die ("dead");
$subselect = array();
while($row=mysql_fetch_assoc($result))
{
  $temp = array(
"value" => $row['CategoryID'],
"text" => $row['Name']
);
  $subselect[] = $temp;
}    

echo <<<END
<script language="javascript">
<!--
var Categories = new Array(2);
Categories= new Array();
END;
foreach ($mainselect as $cat)
{
  echo "
var tmp = new Array();
tmp['text'] = {$cat['text]};
tmp['value'] = {$cat['value']};
Categories[Categories.length-1] = tmp;";
}
echo <<<END
var SubCategories= new Array();
END;

foreach ($subselect as $cat)
{
  echo "
var tmp = new Array();
tmp['text'] = {$cat['text]};
tmp['value'] = {$cat['value']};
SubCategories[SubCategories.length-1] = tmp;";
}  
echo <<<END  
function populate(mainsel)
{
  var target = document.forms[0].elements['model'];
  target.options.length = 0;
  var val = mainsel.options[mainsel.selectedIndex].value;
  for (var i=0;i<SubCategories.length;i++)
  {
    var current = SubCategories[i];
    if (current["value"] == val)
    {
      var opt = new Option(curent['text'],current['value']);
      target.options[target.options.length-1] = opt;
    }
  }
}

// -->
</script>

<form name="test">
<select name="make" onChange="populate(this);">
END;
foreach ($mainselect as $option)
{
  echo '<option value="' . $option['value'] . '">' . $option['text'] . '</option>
';
}
echo <<<END
</select>
<select name="model"></select>
</form>
END;

?>

Does this work? I assumed that CategoryID signifies the category it is in, with ones with SubSubCat=0 the sublevels and ones with Name<>"top" the main levels.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[idaryl]

OK this is what im kinda looking for also - BUT - I'm not using php - I've tried this:

http://yxScripts.com/cs/chainedselects.html

- but it doesnt allow for multiple menus per page --

So, here's the deal

goto

http://www.energystones.com/change.html

- this is the site I'm developing... you will notice there are 10 items on the page.

That's just the start.. each item has 15-18 different styles to choose from... also the "Dual Stone Amulet" has 15 selections (and each selection has 15 different types of configuration)

So I figured that the chained menu would be the perfect solution to this; EG pick a Dual Stone Amulet with a Quartz top stone and a Jasper bottom stone..... etc etc

I'm currently building the shopping cart with over 180 items in it and there are going to be more in the future. I'm hoping to add all the addresses for each item to the config.js or if each item has its own confij.js as soon as I'm finished the cart [approx 2 days]

Does this explain better??

• idaryl •

http://www.designedimage.com

•

 

[idaryl]

You can read my dilemma here -

http://yxScripts.com/bbs/phpBB2/viewtopic.php?t=239

Any ideas? anyone?

• idaryl •

http://www.designedimage.com

•

 

[chessbot]

So something like this?

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

var types = new Array();
types[0] = new Array("Single energy stone necklace");
types[0][1] = new Array("Agate","Amethyst","Aventurine");
//etc 
types[1] = new Array("Single large energy stone necklace");
types[1][1] = new Array("Agate","Aventurine","Bloodstone");
// etc

function populateTypes()
{
  var sel = document.forms[0].elements['types'];
  for (var i=0; i<types.length; i++)
    sel.options[i] = new Option(types[i][0], types[i][0]);
}

function populateStones(source)
{
  var idx = source.selectedIndex;
  var target = source.form.elements['stones'];
  target.options.length = 0;
  for (var i=0; i<types[idx][1].length; i++)
  {
    var name = types[idx][1][i];
    target.options[i] = new Option(name, name);
  }
}

// -->
</script>
</head>
<body onload="populateTypes();">
<form name="aform" id="aform">
 <select name="types" id="types" onchange="populateStones(this);">
 </select>
 <select name="stones" id="stones">
 </select>
</form>
</body>
</html>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[idaryl]

Hi Mr. Chessbot,

guess what? !yep! Those pesky hidden characters again (I wonder if this happens to other people - generating useless arguments that can be easily avoided - who knows?!?)

Anyway; after stripping them out; the drops work - but - after the selection is made, the user should be able to "open" the requested page in a "blank" page Automatically or by clicking another button at the end [something like a "go" button] - obviously to the purchae page in the cart; - you agree?

annnd.... placed the form in a table {makes it easier to work with) and duplicated it [need at least 6 per page - possibly more] and it refuses to cooperate.

• idaryl •

http://www.designedimage.com

•

 

[chessbot]

Yes... add a submit button at the end of the form.
How are you setting "types"?

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[idaryl]

OK so I added the submit button - but where is the href/url go..? From what I can see the array does'nt allow for the url.

Types? you mean the types of bracelet/necklace or the stone therein? In some instances there are 15 varieties.. eeee!



• idaryl •

http://www.designedimage.com

•

 

[chessbot]

I meant the variable "types".
To add a URL, just add

types[0][2] = "url";
types[1][2] = "url2";
// etc
function openWin(sel)
{
  window.open(types[sel.selectedIndex][2],"infowin");
}
// etc
<input type="button" value="Information" onclick="openWin(this.form.elements['types']);">

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[idaryl]

This is what I have now
<html>
<head>
<script type="text/javascript">
<!--
var types = new Array();
types[0] = new Array("Choose from here");
//etc
types[1] = new Array("Single energy stone necklace");
types[1][1] = new Array("Agate","Aventurine","Bloodstone");
//etc
types[2] = new Array("Single large energy stone necklace");
types[2][1] = new Array("Agate","Aventurine","Bloodstone");
//etc
types[3] = new Array("Dual large energy stone necklace");
types[3][1] = new Array("Agate - [Top Stone] ","Aventurine - [Top Stone] ","Bloodstone - [Top Stone] ");
//etc
types[4] = new Array("Amulet");
types[4][1] = new Array("Agate","Aventurine","Bloodstone");
// etc
function populateTypes()
{
var sel = document.forms[0].elements['types'];
for (var i=0; i<types.length; i++)
sel.options = new Option(types[0], types[0]);
}
function populateStones(source)
{
var idx = source.selectedIndex;
var target = source.form.elements['stones'];
target.options.length = 0;
for (var i=0; i<types[idx][1].length; i++)
{
var name = types[idx][1];
target.options = new Option(name, name);
}
}
// -->
</script>
</head>
<body onload="populateTypes();">

<table width="41%" border="0" cellspacing="1" cellpadding="1" height="8" align="center">
<tr><td><form name="aform" id="aform">
<table width="100%" border="0" cellspacing="1" cellpadding="1"><tr>
<td><select name="types" id="types" onChange="populateStones(this);"></select></td>
<td><select name="stones" id="stones"></select></td>
<td><input type="submit" name="Submit" value="-- Buy this Item --"></td>
</tr>
</table>
</form></td>
</tr>
</table>
</body>
</html>

if I replace the "types0" with the new stuff - then then second selection goes byebye

• idaryl •

http://www.designedimage.com

•

 

[chessbot]

This works fine for me:

<html>
<head>
<script type="text/javascript">
<!--
var types = new Array();
types[0] = new Array("Choose from here");
types[0][1] = new Array("Choose stone here");
//etc
types[1] = new Array("Single energy stone necklace");
types[1][1] = new Array("Choose stone here","Agate","Aventurine","Bloodstone");
//etc
types[2] = new Array("Single large energy stone necklace");
types[2][1] = new Array("Choose stone here","Agate","Aventurine","Bloodstone");
//etc
types[3] = new Array("Dual large energy stone necklace");
types[3][1] = new Array("Choose stone here","Agate - [Top Stone] ","Aventurine - [Top Stone] ","Bloodstone - [Top Stone] ");
//etc  
types[4] = new Array("Amulet");
types[4][1] = new Array("Choose stone here","Agate","Aventurine","Bloodstone");
// etc
function populateTypes()
{
  var sel = document.forms[0].elements['types'];
  for (var i=0; i<types.length; i++)
    sel.options[i] = new Option(types[i][0], types[i][0]);
}
function populateStones(source)
{
  var idx = source.selectedIndex;
  var target = source.form.elements['stones'];
  target.options.length = 0;
  for (var i=0; i<types[idx][1].length; i++)
  {
    var name = types[idx][1][i];
    target.options[i] = new Option(name, name);
  }
}
// -->
</script>
</head>
<body onload="populateTypes();">

<table width="41%" border="0" cellspacing="1" cellpadding="1" height="8" align="center">
  <tr><td><form name="aform" id="aform" action="?" method="get">
          <!-- change your action and method to your shopping page -->
          <!-- the values will look like -->
<!--
[types] => "amulet"
[stones] => "Agate"
[Submit] => "-- Buy this Item --"
-->
        <table width="100%" border="0" cellspacing="1" cellpadding="1"><tr>
            <td><select name="types" id="types" onChange="populateStones(this);"></select></td>
            <td><select name="stones" id="stones"></select></td>
            <td><input type="submit" name="Submit" value="-- Buy this Item --"></td>
          </tr>
        </table>
        </form></td>
  </tr>
</table>
</body>
</html>

Do you want each type to submit to a different page?

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[idaryl]

yes - that way I can configure it to the cart pages

• idaryl •

http://www.designedimage.com

•

 

[chessbot]

Oh... In that case, try

<html>
<head>
<script type="text/javascript">
<!--
var types = new Array();
types[0] = new Array("Choose from here");
types[0][1] = new Array("Choose stone here");
types[0][2] = ""; // URL to submit to, blank if not a valid choice
//etc
types[1] = new Array("Single energy stone necklace");
types[1][1] = new Array("Choose stone here","Agate","Aventurine","Bloodstone");
types[1][2] = "single_energy_stone_necklace.php";
//etc
types[2] = new Array("Single large energy stone necklace");
types[2][1] = new Array("Choose stone here","Agate","Aventurine","Bloodstone");
types[2][2] = "single_large_energy_stone_necklace.php";
//etc
types[3] = new Array("Dual large energy stone necklace");
types[3][1] = new Array("Choose stone here","Agate - [Top Stone] ","Aventurine - [Top Stone] ","Bloodstone - [Top Stone] ");
types[3][2] = "dual_large_energy_stone_necklace.php";
//etc  
types[4] = new Array("Amulet");
types[4][1] = new Array("Choose stone here","Agate","Aventurine","Bloodstone");
types[4][2] = "amulet.php";
// etc
function populateTypes()
{
  var sel = document.forms[0].elements['types'];
  for (var i=0; i<types.length; i++)
    sel.options[i] = new Option(types[i][0], types[i][0]);
}
function populateStones(source)
{
  var idx = source.selectedIndex;
  var target = source.form.elements['stones'];
  target.options.length = 0;
  for (var i=0; i<types[idx][1].length; i++)
  {
    var name = types[idx][1][i];
    target.options[i] = new Option(name, name);
  }
}
function setAction(f)
{
  var idx = f.elements['types'].selectedIndex;
  var action = types[idx][2];
  if (action == "")
  {
    alert("No page found to submit to for index "+idx);
    return false;
  }
  f.action = action;
  return true;
}
// -->
</script>
</head>
<body onload="populateTypes();">

<table width="41%" border="0" cellspacing="1" cellpadding="1" height="8" align="center">
  <tr><td><form name="aform" id="aform" action="?" method="get" [red]onsubmit="return setAction(this);"[/red]>
        <table width="100%" border="0" cellspacing="1" cellpadding="1"><tr>
            <td><select name="types" id="types" onChange="populateStones(this);"></select></td>
            <td><select name="stones" id="stones"></select></td>
            <td><input type="submit" name="Submit" value="-- Buy this Item --"></td>
          </tr>
        </table>
        </form></td>
  </tr>
</table>
</body>
</html>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[idaryl]

Lets see if I got this right --- [types[1][1] = new Array("Choose stone here","Agate","Aventurine","Bloodstone");] this array is for the types of stones available - and each one of these has a page defined in the cart for it. The page call should come from here (the 15 stones available) [This is where the call should be from]
--but--
The page does a call to a page from here: types[1] = new Array("Single energy stone necklace"); (which is the type of necklace/bracelet/whatever)

• idaryl •

http://www.designedimage.com

•