how to populate dropdown with dynamic date based on 2 other dropdown boxes

问题

I have 3 dropdownlists 1. here I need to select a quality of products 2. here I need to select standard or non standard IF standard then the 3rd list needs to be populated with dynamic data IF non standard then nothing (3rd box empty)

However the populated list (3rd) needs another selection which is based also on the selection out of the first dropdown list

I have no idea how to combine the 3 lists and make it populate the 3rd one

First list is named quality Second list is named measurements Third list is named lengte_breedte

it is based on a mysql database where I select the following: SELECT lengte_breedte FROM fb_lengte_breedte WHERE measurements = ?

And I have the Json header('Content-type: application/x-json');

echo json_encode($fb_query); exit;

document.observe('dom:loaded', function(f){ $('measurements').observe('change', populateMeasurements).bindAsEventListener(); }); function populateMeasurements(e){ // collect params var qs = '&measurements=' + $F('measurements'); // create request var req = new Ajax.Request('nameRequest.php', { method: 'post', parameters: qs, onComplete: function(transport){ // collect response, evel to object var obj = eval(transport.responseText); // clear select item $('lengte_breedte').options.length = 0; // iterate and build new menu $('lengte_breedte').options[$('lengte_breedte').options.length] = new Option('-- Select --', ''); var ListItems = new Array(); // create new select item options obj.each(function(t){ ListItems[ListItems.length] = new Option(t.lengte_breedte, t.lengte_breedte); }); // populate new item for(var i=ListItems.length - 1;i>=0;i--){ $('lengte_breedte').options[$('lengte_breedte').options.length] = ListItems[i]; } } // onComplete }); } // end function

回答1:

So it seems like only only really need to populate the 3rd listed if the 2nd is selected to standard to the first thing to do is add an if condition in your event listener that is watching for the change of the 2nd list. If non standard empty the 3rd list and you are done. Else if standard do the ajax call to nameRequest.php passing the current value of list 1 as a parameter that. Upon return of the call populate the 3rd list and you are good to go.

As a note you should disable the submit button while waiting for the ajax to populate the 3rd list then reenable when you are done building that list from the returned data.

来源：https://stackoverflow.com/questions/1966407/how-to-populate-dropdown-with-dynamic-date-based-on-2-other-dropdown-boxes