Re: Relating two combo boxes from a db....
| From: | Adrian Murphy | Date: | Tue, 21 Nov 2000 17:17:28 +0000 |
| Subject: | Re: Relating two combo boxes from a db.... | ||
| References: | 1 | Groups: | php.general |
| Request: | Send a blank email to php-general+get-26481@lists.php.net to get a copy of this message | ||
heres a static version.
the dynamic stuff shouldn't be too difficult if u have this.
mail me with any problems.
g'luck.
adrian
p.s theres quite a bit of javascript at the start.best to keep it in an
external file.
<html>
<head>
<title></title>
<script language=Javascript>
var NS4 = (document.layers)?true:false;
var IE4 = (document.all)?true:false;
function _struct(child,childcaption,parent){
this.child = child;
this.childcaption = childcaption;
this.parent = parent;
}
function _addobject(child,childcaption,parent){
var obj = new _struct();
obj.child = child;
obj.childcaption = childcaption;
obj.parent = parent;
return(obj);
}
function insertEntry(child,childcaption,parent){
if(child.length > 0
for(var i=0;i<this.length;i++)
if(this.items[i].child == child)
return;
this.items[this.length++] = _addobject(child,childcaption,parent);
}
}
function OptionCollection(){
this.length=0;
this.items = new Object();
this.Add=insertEntry
}
function clearSelect(oSelect){
var iCount=0;
if(!oSelect) return;
iCount = oSelect.options.length;
for(var i=0;i<iCount;i++){
if(IE4)
oSelect.options.remove(0);
else if(NS4)
oSelect.options[0]=null;
}
}
function addOptions(oSelect,olist,parent){
var elOption;
var idxSelect=0;
//check arguments.
if((!olist) || (!oSelect))return;
if(parent.length <= 0) return;
//now looop through all the list items only entering relevant options.
clearSelect(oSelect);
//add a blank list
elBlankOption = new Option();
elBlankOption.text = "";
if(NS4) oSelect.options[0] = elBlankOption
else if(IE4) oSelect.options.add(elBlankOption,0)
elBlankOption.value = "";
for(var
i<olist.length;i++){
//only the child entries of the parent
if(olist.items[i].parent == parent){
elOption = new Option();
//now IE and NS have a different way to handle object creation.
if(NS4){
elOption.value = olist.items[i].child
elOption.te
xt = olist.items[i].childcaption
oSelect.options[idxSelect] = elOption
}else
){
elOption.value = olist.items[i].child
elOption.text = olist.items[i].childcaption
oSelect.options.add(elOption,idxSelect)
}
idxSelect++;
delete(elOption);
}
}
}
function clearOptions(szSelect,szForm){
if(szSelect.length <= 0 || szForm.length <=0)
alert("error:clearOption must pass arguments");
if(IE4)
clearSelect(document.all.item(szSelect));
else if(NS4)
clearSelect(eval('document.' + szForm + '.' + szSelect));
}
function listAllOptions(szSelect,szForm,olist){
var elOption;
var idxSelect=0;
var oSelect = new Object();
//check arguments.
if(!olist)return;
if(IE4)
oSelect = document.all.item(szSelect);
else if(NS4)
oSelect = eval('document.' + szForm + '.' + szSelect);
if(!oSelect)return;
//now looop through all the list items entering all
clearSelect(oSelect);
for(var i=0;i<olist.length;i++){
elOption = new Option();
//now IE and NS have a different way to handle object creation.
if(NS4){
elOption.value = olist.items[i].child
elOption.text = olist.items[i].childcaption
oSelect.options[idxSelect] = elOption
}else if(IE4){
elOption.value = olist.items[i].child
elOption.text = olist.items[i].childcaption
oSelect.options.add(elOption,idxSelect)
}
idxSelect++;
delete(elOption);
}
}
function UpdateSelect(szSelect,szForm,szParent,olist){
if(IE4)
addOptions(document.all.item(szSelect),olist,szParent);
else if(NS4)
addOptions(eval('document.' + szForm + '.' + szSelect),olist,szParent);
}
//all the previous javascript would be better off in an external file so u could re-use it
//create ourlink list of different issues,articles
</script>
<-- Here where your dynamic stuff goes-->
<?php
echo "<script language=Javascript>";
echo "var IssueArticle = new OptionCollection();";
//add a few entries this can als
o be written via php dynamically
//IssueArticle.Add("(increment)","(subctegory)","(categoryID)");
echo "IssueArticle.Add(\"1\",\"subcategory1a\",\"1\");";
echo "IssueArticle.Add(\"2\",\"subcategory1b\",\"1\");";
echo "IssueArticle.Add(\"3\",\"subcategory1c\",\"1\");";
echo "IssueArticle.Add(\"4\",\"subcategory1d\",\"1\");";
echo "IssueArticle.Add(\"5\",\"subcategory2a\",\"2\");";
echo "IssueArticle.Add(\"6\",\"subcategory2b\",\"2\");";
echo "IssueArticle.Add(\"7\",\"subcategory2c\",\"2\");";
echo "IssueArticle.Add(\"8\",\"subcategory2d\",\"2\");";
echo "</script>";
?>
</head>
<body bgcolor="White">
<table>
<tr>
<td colspan=6></td>
</tr>
</tr>
<tr>
<!--parent select-->
<td align=right valign=top><font face=arial
size=2><b>Category : </b></font></td>
<td align=left valign=top>
<form action="" name="form">
<SELECT name=CatID
onchange="UpdateSelect('SubCatID','form',this.options[this.selectedIndex].va
lue,IssueArticle);">
<option value="">[Select a Category]</option>
<-- These would be dynamically pulled from a db too where value woul equal
id-->
<option value="1">Category 1</option>
<option value="2">Category 2</option>
</select></td></tr>
<tr>
<td align=right bgcolor=lightgrey><font face=arial
size=2><b>Subcategory : </b></font><br>
<a href="javascript:clearOptions('SubCatID','form');"
style="text-decoration: none;"><font face=arial
size=2><b>Clear! </b></font></a>
</td>
<!--blank dummy option, need for navigator to set the size of dropdown
list-->
<!-- three options a list is fine-->
<!--IE dynamically resizes the width of the select navigator doesn't-->
<!--so just give the option blank space or caption to set the size-->
<td align=left valign=bottom><SELECT name=SubCatID >
<option>[Select a Subcategory]</option>
<option></option>
<option></option>
<option></option>
</select></td>
</form></table>
</BODY>
</HTML>
</table>
</body>
</html>