Зависимый выпадающий список из трех таблиц базы данных

Question

Я новичок в AJAX и JQuery, поэтому я затрудняюсь с этим. В настоящее время у меня есть один раскрывающийся список, который заполняется из базы данных. Показаны три значения из трех разных таблиц базы данных. Следующий раскрывающийся список должен зависеть от того, что выбрано из предыдущего раскрывающегося списка. Если выбрано одно из значений, оно должно отображать идентификаторы из одной конкретной таблицы. Это мой код до сих пор:

HTML & PHP:

<div class="activity"> 
    <form action="" id="activity" name="activity" method="GET"> 
     <table class="table" id="activity"> 
     </br> 
     <p><b> Create an Activity: </b></p>  
      <tr> 
      <td><input type="text" name="activity_name" id="activity_name" placeholder="Activity Name" class=""/> </td> 
     </tr> 
     <tbody id="activityTable"> 
     <tr id="copyRow"> 
      <td><input type="text" name="day" id="day" placeholder="Day" class=""/></td> 
      <td>Activity Type: <?php 
       $sql = "SELECT activity_type as activity_type FROM activity1 UNION SELECT activity_type as activity_type FROM activity2 UNION SELECT activity_type as activity_type FROM activity3"; 
       $result = mysql_query($sql); 

       echo "<select name='activity_type'>"; 
       while ($row = mysql_fetch_array($result)) { 
       echo "<option value='" . $row['activity_type'] ."'>" . $row['actitivy_type'] ."</option>"; 
       } 
       echo "</select>"; 
       ?> 
      </td> 
      <td>Activities(s): <select name="activities" size="2" multiple="multiple" style="width:70px"> 
       <option> </option> 
      </select> 
      </td> 
      <td><input type="button" id="deletebutton" name="delete" value="Delete" class="btn btn-default navbar-btn" onclick="deleteRow(this)"/></td> 
      </tr> 
    </table> 
    <div class="addbutton"> 
    <input type="button" name="add" value="+" class="btn btn-default navbar-btn" onclick="addRow('activity')"> 
</div> 
</form> 
<div class="button"> 

JavaScript:

<script type="text/javascript"> 
function addRow() { 
    var row = document.getElementById("copyRow"); // find row to copy 
    var table = document.getElementById("activityTable"); // find table to append to 
    var clone = row.cloneNode(true); // copy children too 
    table.appendChild(clone); // add new row to end of table 
} 

function deleteRow(btn) { 
    var row = btn.parentNode.parentNode; 
    row.parentNode.removeChild(row); 
} 

Answer 1

Если вы делаете JQuery (хотя я не вижу, используемых в вашем примере кода), можно использовать on():

<select class="dynamic" name="activity_type"> 
    <option value="">Select</option> 
    <option value="one">Activity One</option> 
    <option value="two">Activity Two</option> 
    <option value="three">Activity Three</option> 
</select> 

<script> 
$(document).ready(function() { 
    $(this).on('change','.dynamic',function(){ 
     var useData      = {}; 
     useData[$(this).attr('name')] = $(this).val(); 
     $.ajax({ 
      url: '/processing_page.php', 
      type: 'post', 
      data: useData, 
      success: function(response) { 
       /* 
        Do whatever code you want here and drop it where ever. 
        You could choose to just have your php page generate the 
        html and you just drop it somewhere: 
        $('#spot').html(response); 
        or just send/receive/parse JSON and generate the html 
        with javascript. 
       */ 
      } 
     }); 
    }); 
}); 
</script>