Linked (or Dependant) ComboBoxes

Note: This article is relevent for Classic ASP, JSP, and PHP users. ASP.NET users should read the one found in the ASP.NET section. It is also referenced at the bottom of this page.

There are situations where multiple comboboxes must be linked. When one combobox changes, the dataset of the other must change aswell.

One example would be of a Country / Province relationship. Choosing the state would necessarily repopulate the Province combobox with different data.

The first step is to wire up the first (or parent) combo to the onSelectEvent. Eg:

<ntb:Combo id="cmbCountry"
  OnSelectEvent="cmbCountry_Select()"
Mode="classic">

<ntb:ComboTextBox DataFieldIndex=1 Editable="false"
   Value="[Select Value]">
</ntb:ComboTextBox>

<ntb:ComboList DatasourceUrl="get.asp?table=tblCountries">

  <ntb:ComboColumnDefinition DataFieldIndex=1>
</ntb:ComboColumnDefinition>

</ntb:ComboList>

</ntb:Combo>

And our dependant combobox (the child combo) will be as follows:

<ntb:Combo id="cmbProvince" Mode="classic">
<ntb:ComboTextBox DataFieldIndex=1 Editable="false" Value="">
</ntb:ComboTextBox>

<ntb:ComboList DatasourceUrl="get.asp?table=tblProvinces&whereClause=false">

<ntb:ComboColumnDefinition DataFieldIndex=1>
</ntb:ComboColumnDefinition>

</ntb:ComboList>
</ntb:Combo>

Next, write a JavaScript function to perform the action:

// Fires when the user clicks on the country combo.
function cmbCountry_Select(){

    // Get the combo objects using their ids.
    provinceCombo = $("cmbProvince").jsObject;
    countryCombo = $("cmbCountry").jsObject;

    // Get the selected country id.
    var countryId = countryCombo.GetFieldFromActiveRow("CountryId");

   // Clear the list and any other selected values.
   provinceCombo.GetList().Clear();

   // Use a postback to get data from the datasource.
   provinceCombo.GetList().SetDatasourceUrl("get.asp?table=tblProvinces&whereClause=" + escape("CountryId=" + countryId) );
   provinceCombo.GetList().GetPage(0,0,"");

   provinceCombo.SetTextValue("[Select a province]");

}

The GetPage line tells the 2nd combo (the province combo) to requery based on the new datasource url.

Note: one key thing to understand here is that the datasource (in this case get.asp) has been written to return different datasets depending on the parameters sent to it. This aspect of it is up to you to implement. A demo is included with the trial version.

Linked (or Dependant) ComboBoxes (ASP.NET)

View Printable Version

Nitobi Product Knowledgebase

Linked (or Dependant) ComboBoxes

Related Articles

Comments: