@{
// ... here your former code
var dep = db.Query(selectQueryStringDEPARTMENT);
var curDep = dep.First().DEPARTMENT;
var selectQueryStringPerson = "SELECT PERSON.SURNAME, PERSON.NAME, DEPARTMENT.DEPARTMENT FROM DEPARTMENT " +
"INNER JOIN PERSON ON PERSON.DEPARTMENT_ID = DEPARTMENT.DEPARTMENT_ID where DEPARTMENT.DEPARTMENT = @0";
if(IsPost) {
if(!Request["btn2"].IsEmpty()){
// ... here form processing
}
curDep = Request["drop1"];
}
var persons = db.Query(selectQueryStringPerson, curDep);
}
<html>
<body>
<form action="" method="post">
<select name="drop1">
@foreach(var row in dep){
<option
@if(@row.DEPARTMENT == curDep) {<text>selected="selected"</text>}>@row.DEPARTMENT</option>
}
</select>
<input type="submit" name="btn1" value="Go"/>
<select name="drop2">
@foreach(var row in persons){
<option>@row.NACHNAME, @row.VORNAME</option>
}
</select>
<input type="submit" name="btn2" value="Submit"/>
</form>
</body>
</html>
When starts, the page takes the first department as default (var curDep = dep.First().DEPARTMENT;) and populates the second dropdown list with persons from this department.
If you want to choose another department, you must select it and click the "Go" button.
Clicking the "Submit" button starts the form processing.
Hope I haven't made mistakes.
Marked as answer by being_mp on Feb 22, 2012 09:35 AM
GmGregori
Contributor
5470 Points
737 Posts
Re: Cascading Selectboxes from Database
Feb 22, 2012 12:10 AM|LINK
Adjust the following snippet to your goals:
@{ // ... here your former code var dep = db.Query(selectQueryStringDEPARTMENT); var curDep = dep.First().DEPARTMENT; var selectQueryStringPerson = "SELECT PERSON.SURNAME, PERSON.NAME, DEPARTMENT.DEPARTMENT FROM DEPARTMENT " + "INNER JOIN PERSON ON PERSON.DEPARTMENT_ID = DEPARTMENT.DEPARTMENT_ID where DEPARTMENT.DEPARTMENT = @0"; if(IsPost) { if(!Request["btn2"].IsEmpty()){ // ... here form processing } curDep = Request["drop1"]; } var persons = db.Query(selectQueryStringPerson, curDep); } <html> <body> <form action="" method="post"> <select name="drop1"> @foreach(var row in dep){ <option @if(@row.DEPARTMENT == curDep) {<text>selected="selected"</text>}>@row.DEPARTMENT</option> } </select> <input type="submit" name="btn1" value="Go"/> <select name="drop2"> @foreach(var row in persons){ <option>@row.NACHNAME, @row.VORNAME</option> } </select> <input type="submit" name="btn2" value="Submit"/> </form> </body> </html>When starts, the page takes the first department as default (var curDep = dep.First().DEPARTMENT;) and populates the second dropdown list with persons from this department.
If you want to choose another department, you must select it and click the "Go" button.
Clicking the "Submit" button starts the form processing.
Hope I haven't made mistakes.