Question

Question

How can I get this sequence to fire when a user takes action instead of on load?

Background

I have three <select> menus chained together: country, region, city. The options presented in region depend on the value selected in country, and the options presented in city depend on the value selected in in region. For example, if you select “United States” from country, the options in region will be the 50 states, and so on. Country is the only menu that’s always static. Region and city menu options are populated dynamically depending on what the user has selected from the preceding menus. When values from country or region are selected, the options for their chained sub-menus are fetched from the server. This process is fired on $(selectID).change(). I’m using the Chained Selects jQuery Plugin to accomplish this. Specifically, I’m using the “remote” version of the API (source code).

The structure of the <select> menus:

<select id="country">
  <option value="0">Select country...</option>
  <option value="1">Country 1</option>
  <option value="2">Country 2</option>
  ...
</select>

<select id="region">
  <option value="0">Select region...</option>
  <option value="1">region 1</option>
  <option value="2">region 2</option>
  ...
</select>

<select id="city">
  <option value="0">Select city...</option>
  <option value="1">city 1</option>
  <option value="2">city 2</option>
  ...
</select>

By way of the chaining API, the <select> menus are chained together in $(document).ready() as follows:

$('#region').remoteChained('#country', 'server.php');
$('#city').remoteChained('#region', 'server.php');

Problem

These <select> menus are part of a search interface. This interface remembers the user’s most recent search. Say, for example, the user’s most recent search was “United States > Louisiana > New Orleans”, the <select> items on the page should then initially be rendered as follows (the chaining API should not come into play at all yet at this point):

<select id="country">
  ...
  <option value="113" selected>United States</option>
  ...
</select>

<select id="region">
  ...
  <option value="1390" selected>Louisiana</option>
  ...
</select>

<select id="city">
  ...
  <option value="17267" selected>New Orleans</option>
  ...
</select>

But what ends up happening is, when the $(selectID).remoteChained(...) functions are called in $(document).ready(), the region and city select options are overwritten by values fetched from the server, and the “selected” options are lost (the entire list of initial <option> items for region and city are lost, in fact). Using the example saved search above, the options for each of the three select options should initially be pre-selected to 1) United States 2) Louisiana 3) New Orleans but instead are 1) United States 2) Select region… 3) Select city… In other words, the <select> menus should only be built dynamically when the user has physically changed one of the values, never on page load.

Any advice on how to avoid fetching the new select options on page load, and do it only when select options are physically changed by the user? I’ve tried calling the remoteChained() function in $(selectID).change() but run into recursion issues that overload the stack, so that doesn’t work.

Thanks in advance for any ideas you might have.

Answer 1

I found the problem. This line below from the source code was forcing the <select> elements to refresh on load. I just removed it. Now it only refreshes when the user makes a change.

/* Force updating the children. */
$(this).trigger("change");