Can one dropdownlist manipulate the other ?

Can one dropdownlist manipulate the other ?

I'm trying to build a seat reservation site for a theater (school project) and what I want to achieve is following:

I have a first dropdownlist (row) which is generated through PHP. There are 12 rows named from A-L. Each row has a 12 seats. I get data from the database which row/seat combo is not available and I want to remove those seats ( second dropdownlist ) that correspond with the associated row.

I succesfully grab the unavailable row/seat combo from a MySQL database using PHP and I return those values as an JSON object through an AJAX call.

  1.     function test() {
  2.     
  3.         $.ajax({
  4.             url : 'scripts/testID.php',
  5.             type : 'POST',
  6.             dataType : 'json',
  7.             success : function(result){
  8.                 $.each(result, function(i,obj) {
  9.                 alert(obj.row + " " + obj.seat);
  10.                 });
  11.             },
  12.             error : function () {
  13.                 alert("error");
  14.             }
  15.         })
  16.     }

Example: Reservation id 19 gives me these unavailable seats in a JSON object

  1.  [{"id":"27","row":"A","seat":"1"},{"id":"28","row":"A","seat":"2"},{"id":"33","row":"B","seat":"6"}]
In this example from the first dropdownlist for option A, the options 1 and 2 should NOT appear. 3->12 should appear ( these are the available seats ). And when I cleck on B in the first dropdownlist, option 6 should NOT appear. 1->5 & 7->12 are allowed to appear

At the moment I generate the first list using PHP but this just gets me X times the first dropdown list.


Is this possible in jQuery or is this far fetched ?

Thanks in advance!