Dependent selects

Creating interdependent select controls.

Having the content of one SELECT element (dropdown list) depending on the value selected in another SELECT element is a common pattern in web user interfaces.

Sirl offers different ways to solve this dependency. One solution is to submit the form on change of the latter SELECT element. The server will know which value was selected (as well as other values entered in the form that may be of importance) and will provide a new version of the form in which the former SELECT element has the matching set of values.

In the following example a continent dropdown list will make its form be submitted on change by virtue of the onchange-submit class it has:

<div class="target">
  <form action="/Countries/Submit" method="post">
    <p>
      <label>Select a continent:</label>
      <select name="Continent" class="onchange-submit">
        <option></option>
        <option>Europe</option>
        <option>Americas</option>
        <option>Asia</option>
      </select>
    </p>
    <p>
      <label>Select a country:</label>
      <select name="Country">
      </select>
    </p>
    <p>
      <button type="submit" formaction="/Countries/Save">Save</button>
    </p>
  </form>
</div>

Since the form has an inline target (one way to set an inline target for a form is to surrounded it by a DIV element with a target class), an Ajax call will be performed to submit the form. The server then has to return new content for the target (a new form with proper options for the second SELECT dropdown list).

The Save operation also submits the form, but uses a different action URL.