AJAX In Action [167]
9.5.1 Allowing multiple-select queries
The code we have discussed so far is a simple example, allowing a user to select only one option from each selection list. In some cases, a user may be required to select more than one option from the first list. That means the second list in our combination will be populated with values corresponding to each selected option in the first list. With some simple changes to our client-side and server-side code, we can make this happen.
The first thing to do is to set up the first selection list to allow multiple items to be chosen. To do this, we need to add the multiple attribute to the select tag. To specify how many options to display, we can add the size attribute. If size is smaller than the number of options, the selection list will be scrollable to reveal those that are not visible.
The next step is to change the FillTerritory() function. Instead of just referencing the selected index of the select element, we need to loop through all the options and find each of the selected values. We add the value of each selected option to the parameter string:
function FillTerritory(oElem,oTarget){
var url = 'DoubleComboMultiple.aspx';
var strParams = "f=" + oTarget.form.name +
"&e=" + oTarget.name;
for(var i=0;i strParams += "&q=" + oElem.options[i].value; } } var loader1 = new net.ContentLoader(url,FillDropDown,null,"POST",strParams); } The last thing to do is change the code of the server-side script to handle the multiple values passed in the request. In .NET, the multiple values are represented in a single string, separated by commas. In order to get each item individually, we need to split the string into an array. We can then build our WHERE clause for the SQL statement by looping through the array. Dim strQuery As String = Request.Form("q") Dim strWhere As String = "" Dim arrayStr() As String = strQuery.Split(",") Dim i As Integer For Each i In arrayStr If strWhere.Length > 0 Then strWhere = strWhere & " OR " End If strWhere = strWhere & " regionid = " & i Next Dim strSql As String = "SELECT " & _ " TerritoryDescription, " & _ " TerritoryID" & _ " FROM Territories" & _ " WHERE " & strWhere & _ " ORDER BY TerritoryDescription" Licensed to jonathan zheng Refactoring 345 With these changes, a user to can select multiple regions from the first selection list, and the territories corresponding with every selected region will appear in the second list. 9.5.2 Moving from a double combo to a triple combo Moving to a double combo to a triple combo requires only a small number of changes, depending on how we want to handle the logic on the server. The first option is to move our logic into multiple server-side pages so that we can run a different query in each. That would mean adding another parameter to each selection list’s onchange handler, representing the URL of the server-side script to call. The other option can be as simple as adding an if-else or a switch-case statement to the server-side code. The if-else structure needs a way to determine which query to execute in order to return the appropriate values. The simplest check is to decide which SQL query to use based on the name of the select element to be populated. So, when we are performing a triple combo, we can check that the value of the strElem variable. This way, we do not need to make any changes to the onchange event handlers in the client-side code. Dim strSql As String If strElem = "ddlTerritory"