Way 2 Web

Web development tips


 
Linked Selection

Introduction

Linked Selection relates two select tags so that the second is filled with data relevant to the value of the first.

The data options are represented as arrays of Javascript objects.

You can specify what options are to appear at the start (startOptions) and in the event that there is no data for the selected value (noDataOptions).

See also our Ajax Linked Selection widget.

API

Constructor

LinkedSelection (sourceTag, targetTag, options [, startOptions]
                 [, targetSelectedValue] [, noDataOptions]);
sourceTag
Object reference or ID of the first select box
targetTag
Object reference or ID of the second select box
options
Array of objects representing option values for the target
startOptions
Array of objects representing option values to appear at the start of the target when target data exist
targetSelectedValue
Default selected value of target
noDataOptions
Array of objects representing option values to appear at the start of the targetwhen target data does NOT exist

Javascript objects for options require fields: sValue (source value), value, text.

Javascript objects for startOptions and noDataOptions require fields: value, text.

[Top of page]

Demo

Country and State

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

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

[Top of page]

Code

HTML

<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>
</select>
<br />
<select id="state" name="state">
</select>

Javascript

<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_LinkedSelection.js"></script>
<script language="javascript">
    var stateOptions = [{sValue:"1",value:"10",text:"California"},
                        {sValue:"1",value:"11",text:"New York"},
                        {sValue:"1",value:"12",text:"Washington"},
                        {sValue:"2",value:"20",text:"Ontario"},
                        {sValue:"2",value:"21",text:"Quebec"}];
    var startOptions = [{value:"",text:"--select state---"}]; 
    var noDataOptions= [{value:"",text:"--select state---"},
                        {value:"0",text:"State N/A"}]; 
		             
    window.onload = function(){
        var countryStates = 
            new ylib.widget.LinkedSelection("country", "state", 
		                          stateOptions, startOptions,
		                          "11", 
		                          noDataOptions);
    }
</script>
[Top of page]

Files

[Top of page]

Recommendations