Menu
hi experts, In my app, I have multi-level dependent select boxes using AJAX retrieving data from database.
RIght now I can get second select box hide/show depending on the selection from first select box. But I am having trouble to get third select box to hide when different selection is made from second box. right now it doesn’t replace the old box with new one, it keeps appending to it. I’ve tried many ways to solve the problem, but no luck on me yet.
Here is javascript function that handles this:
[code]
function getSecond(Pid) {
var ParentCat = $(Pid); //obj of parent selection
var url = ‘http://kewei-desktop:3000/admin/subcategories/category/’ + ParentCat.value;
var divIdName = “category_”+ParentCat.value+”_children”;
new Ajax.Request( url,
{
method: ‘post’,
onSuccess: function(transport) {
var response = transport.responseText;
var tmp = document.createElement(“div”);
tmp.setAttribute(“class”, “SubCategory”);
tmp.setAttribute(“id”, divIdName);
// response returns HTML text of the whole select box,
// when there is no child, response.length is 4.
if ( response.length > 4 ) {
$(“linkInfo”).removeChild($(“linkInfo”).lastChild);
$(“linkInfo”).appendChild(tmp);
}
else {
$(“linkInfo”).removeChild($(“linkInfo”).lastChild);
$(“linkInfo”).appendChild(tmp);
}
}
}
)
}
</script>
I am fairly new to JS and AJAX, please give me some hints or suggestions,
Thanks in advance