help on select box

jj0914

Aug 15th 2007, 7:03 am

Hi guys, I have 3 select boxes which has dependent relationship, the second box will show up depends on selection from first box, the third box will show up depends on second box, So far I can get second box showing up no problem, but not sure how I can get the third box working.

the second box and third box are created on the fly.

here is my code:

<script type="text/javascript" src="[% c.uri_for("/static/js/effects.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/controls.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/prototype.js") %]"></script>

<script type="text/javascript">

function getSubCat(PID) {
var category = $(PID);
var url = 'http://kewei-desktop:3000/admin/subcategories/category/' + category.value;
var divIdName = "category_"+category.value+"_children";

new Ajax.Request(url, {
method: 'post',
onSuccess: function(transport) {
var response = transport.responseText;
var tmp1 = document.createElement("div");
tmp1.setAttribute("class", "SubCategory");
tmp1.setAttribute("id", divIdName);
tmp1.innerHTML = response;
if ( response.length > 4 ) {
tmp1.innerHTML = response;
$("linkInfo").removeChild($("linkInfo").lastChild);
$("linkInfo").appendChild(tmp1);
}
else {
$("linkInfo").removeChild($("linkInfo").lastChild);
$("linkInfo").appendChild(tmp1);
}
}
}
)
}

</script>

Can anyone give me hints? Thanks in advance

Mike H.

Aug 15th 2007, 7:17 am

See my AJAX/PHP/MySQL Dynamic Dependent Select List code here:
http://ajaxforums.net/index.php?topic=858.0

Three lists, second dependent upon main, third dependent upon second, tested in IE and FF:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<script type="text/javascript">

var categories = [];
categories["startList"] = ["Apparel","Books"]
categories["Apparel"] = ["Men","Women"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
categories["Men"] = ["Shirts","Ties","Belts"];
categories["Women"] = ["Blouses","Skirts","Scarves"];
categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science","Romance"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];

var nLists = 3; // number of lists in the set

function fillSelect(currCat,currList){

var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++)
{
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat)
{
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(isValue){

alert(isValue);
}

function init(){

fillSelect('startList',document.forms[0]['List1'])
}

onload=init;

</script>
</head>
<body>
<form action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
 
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
 
<select name='List3' onchange="getValue(this.value)">
<option selected >Make a selection</option>
</select>
</form>
</body>
</html>

jj0914

Aug 15th 2007, 8:03 am

hey mike, I tried both of your code, it is working exactly the way I want. But mine is a little bit different than both of your codes, my second select box and third select box are created on the fly. I modified my code based on the logic from your code, would you mind help me taking a look at it?

<script type="text/javascript">

function getSubCat(PID) {
var category = $(PID);
var url = 'http://kewei-desktop:3000/admin/subcategories/category/' + category.value;
var divIdName = "category_"+category.value+"_children";

new Ajax.Request( url,
{
method: 'post',
onSuccess: function(transport) {
var response = transport.responseText;
var tmp1 = document.createElement("div");
tmp1.setAttribute("class", "SubCategory");
tmp1.setAttribute("id", divIdName);
tmp1.innerHTML = response;
if ( response.length > 4 ) {
tmp1.innerHTML = response;
$("linkInfo").removeChild($("linkInfo").lastChild);
$("linkInfo").appendChild(tmp1);
/*SubCatEvent('children');*/
}
else {
$("linkInfo").removeChild($("linkInfo").lastChild);
$("linkInfo").appendChild(tmp1);
}
}
}
)
}

function SubCatEvent(CID) {
Event.observe( CID, 'click', function() { getSubCat(CID); } );
Event.observe( CID, 'keypress', function() { getSubCat(CID); } );
getSubCat(CID);
}

</script>

Thank you for your code and helps