Way 2 Web

Web development tips

Ajax Linked Selection


Ajax Linked Selection is based on our JavaScript Linked Selection, which relates two select tags so that the second is filled with data relevant to the value of the first.

However, this time the data is refreshed using Ajax calls to a second page, which retrieves the data from a database, memory cache or the like.

BONUS: To link three select boxes, simply create a another widget linking the last two select boxes. (See below.)



AjaxLinkedSelection (masterTag, slaveTag, url [, method]
                  [, requestParams][, errorHandler]);
Object reference or ID of the first select box
Object reference or ID of the second select box
The url of the Ajax server-side page that retrieves "slave data" for the "master selected id".
This page must be able to read in the request "id" as well as other parameters you specify as requestParams (below), and must return a JavaScript array of objects, where each object has attributes: "text" "value", and "selected". (The last one is optional).
The http request method: GET (default) or POST
Array of parameter name-value pairs. These are fixed parameters sent in the Ajax request every time it is sent. Use this to indicate the data request type and the culture, as we have in our demo. The master selected id value is added to the parameter list automatically, and named "id".
Function reference to error handler function. (For advanced users.)
[Top of page]


Country and State

Select country to populate states. There are no states for UK.

Default values: country=USA; state=New York.

[Top of page]



<select id="country" name="country">
    <option value="">-- select country ---</option>
    <option value="2">Canada</option>
    <option value="3">UK</option>
    <option value="1" SELECTED>USA</option>
<br />
<select id="state" name="state">


<script language="javascript" src="../../js/x/x_core.js"></script>
<script language="javascript" src="../../js/y/ylib.js"></script>
<script language="javascript" src="../../js/y/y_util.js"></script>
<script language="javascript" src="../../js/y/y_AjaxLinkedSelection.js"></script>
<script language="javascript">
    var params = ["action=state","culture=en-us"];
    var countryStates = new ylib.widget.AjaxLinkedSelection(
                                    "country", "state", 
                                    "GET", params);

Server-side ASP page (ajaxServer.aspx)

<%@ Page Language="C#" AutoEventWireup="true" 
        CodeFile="ajaxServer.aspx.cs" Inherits="widgets_ajax_ajaxServer" %>

Server-side ASP page - code behind (ajaxServer.aspx.cs)

protected void Page_Load(object sender, EventArgs e) {
    Response.ContentType = "text/javascript";
    string id = Request.QueryString.Get("id");
    string action = Request.QueryString.Get("action");
    StringBuilder returnString = new StringBuilder();
        Retrieve the data based on values "id" and "action"
        and build a response string in this format: 
        No final ";" is necessary
        For example:
    returnString.Append("[{text:\"California\",value:\"CA\",selected:false}," +
                         "{text:\"OH\",value:\"Ohio\",selected:false}," + 
                         "{text:\"NY\",value:\"New York\",selected:true}]");

We use Request.QueryString because we specified "GET" in our widget constructor. We could have used "POST" and Request.Form instead.

We specified the value for action in the widget constructor (in params), since it remains constant between requests. The value for id is supplied by the widget. It corresponds to the selected option of the first select box.

[Top of page]

Three or more select boxes

What if you decide to add a city selection, filled with data dependent on the state?

Simply add another <select> tag, and widget. (And, of course, the server-side processing logic in your ajaxServer.aspx page.) Piece of cake.

var paramsCity = ["action=city","culture=en-us"];
var stateCities = new ylib.widget.AjaxLinkedSelection(
                                "state", "city", 
                                "GET", paramsCity);


Have you benefitted from this site?

If so, please consider making a donation.

Your appreciation is.. well, greatly appreciated.

[Top of page]