ASP database driven chain select menus

[HalRau]

I am try to develop a chain select menu that will consist of two drop-down menus. The first will select a "category" and the second would select a "sub-category" under the category selected. The selections would come from tables in a database and be dynamically created on the fly.

Any ideas on how to accomplish this would be appreicated.

[Spudhead]

Google (http://www.google.co.uk/search?q=AJAX+dynamic+select+box) is (http://www.roubaixinteractive.com/PlayGround/JavaScript/Dependent_List_Box.asp) your (http://www.google.co.uk/search?q=ASP+dynamic+select+box) friend (http://www.dhtmlgoodies.com/index.html?whichScript=ajax_chained_select) :thumbsup:

[HalRau]

I have googled it and found several java script versions but the menu selections all need to be hardcoded into the script. I need something that will get the selections from a database as the selections are large in number and will be changing.
Thanks for your suggestion however.

[pria222]

Hey did you ever find an answer to your question, about how to do the Chain select with asp?

I"m trying to do the same thing and all the chain select I found online needs to be hard coded.


Thanks!

[HalRau]

No, I have not found an answer. Still searching and thinking of how to make it work. Have you come up with anything?

[angst]

this should be simple,

I would use Ajax.
onChange execute an ajax post to get the category id and then query and return the results for the sub-category, and your done!

[angst]

here's an example for you:

the javascript


<script>
function GetXmlHttpObject() {
var xmlHttp = null;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType) xmlHttp.overrideMimeType('text/xml');
} else if (window.ActiveXObject) { // IE
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert ("Browser does not support HTTP Request")
return false;
}
}
}
return xmlHttp;
}

function QuerySubCat(){

var xmlHttp;
xmlHttp=GetXmlHttpObject();
if (!xmlHttp) return false;

var CatID = document.getElementById("Your_Partent_Category_Select_Element_ID");
var url="SubCat.asp?CatID=" + CatID;
xmlHttp.onreadystatechange=function() { DisplaySubCat( xmlHttp ); };
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function DisplaySubCat( xmlHttp ) {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
var response = xmlHttp.responseText;
document.getElementById("Your_Sub_Category_Div_Element_ID").innerHTML = response;
}
}
</script>


the html

<select name='Your_Partent_Category_Select_Element_ID' id='Your_Partent_Category_Select_Element_ID' onChange='QuerySubCat();'>
<option value='Some_Cat_ID'>....</option>
</select>


<div id='Your_Sub_Category_Div_Element_ID'></div>


the subcat.asp

response.write "<select name='' id=''>"
rs = set conn.execute("SELECT * FROM SubCat WHERE CatID = " & request("CatID") )
Do Until rs.EOF
response.write "<option value='" & rs("SubCatID") & "'>" & rs("SubCatName") & "</option>"
Loop
Move.Next
response.write "</select>"



I don't see much asp any more, so this is untested, and again just example code.

[OnlineD]

You can achive this very easily using a dreamweaver extension available from www.webassist.com - it's called dynamic drop downs.

I have just used it for a set of 3 interconnected drop downs and it works like a dream (once you have figured out how to use it that is!)

[sansas2111]

i wanty same thing but 3 level how it is possible