How to keep the correct selection in form with dynamically changing options?

I have the following problem. I’ve made a form which change the form elements dynamically depending on the option it’s selected. Here is short example:

<select name="vehicle" id="vehicle" onchange="$('#div').load('data.php?vehicle='+this.value);"> 
      <option value="1"> motorcycle</option>
      <option value="2">buss</option>
      <option value="3"> truck </option>
      <option value="4">. . .</option>
</select>
<div id="div">
<select name="moto_type" id="moto_type">
      <option value="1">Ducati</option>
      <option value="2">Yamaha</option>
      <option 开发者_开发知识库value="3">Kawasaki</option>
      <option value="4">. . . </option>
</select>
</div>

When buss is selected from the dropdown menu the content of #div is substituted with options available for busses, such as:

<select name="bus_type" id="bus_type">
       <option value="1">A-type</option>
       <option value="2">B-type</option>
       <option value="3">C-type</option>
       <option value="4">. . .</option>
</select>
<select name="bus_seats" id="bus_seats">
       <option value="1">10</option>
       <option value="2">20</option>
       <option value="3">50</option>
       <option value="4">. . .</option>
</select>

Identically all other options change depending on what is selected in that first dropdown menu. After the form is submitted the results are processed and table of results shown. However if the user hits the edit button to go back and edit their choice, the choice in the first dropdown menu is saved (let’s say bus) but the dropdown menus for option bus #2 (buss_type and bus_seats) in #div are replaced with the options for motorcycle #1 (moto_type) which is not correct. I understand why that is happening, what I can’t find out is how to show the user their correct form selection. How to show the correct sub options for each value in the main dropdown menu when the user comes back to the form to edit it? Any help is appreciated!

Additional question:

How do you keep the correct selections in the secondary drop down menus, so they don’t switch back to the default value=”1”?

Don't use inline event handlers, they can only cause you headaches... They are not flexible and don't let you separate your semantic markup and behaviour.

Instead, do something like this (you can put this in a script tag just before body, preferably in a separate file with all your other JS):

$(document).ready(function () {

  $('#vehicle').change(function () {
    $('#div').load('data.php?vehicle='+$(this).val());
  }).change();

});

Notice that you attach the change event handler, and immediately after that you also call it. That ensures that it will load on page load and onchange either.

Also check when the form is initially loaded, not just onchange of the drop down.

i have something similar in asp with dynamically shown divs. I have a function that does the work and I call the function both for the onchange AND when the form initially loads.