来自三个不同数据库表的从属下拉列表

I am new with AJAX and JQuery so I am finding difficulty with this. I currently have one dropdown box which is populated from a database. There are three values shown which are from three different database tables. The next dropdown box should depend on what is chosen from the previous dropdown. If one of the values are chosen, it should display ID's from that one particular table. This is my code so far:

我是AJAX和JQuery的新手,所以我发现这很困难。我目前有一个从数据库填充的下拉框。显示的三个值来自三个不同的数据库表。下一个下拉框应取决于从上一个下拉列表中选择的内容。如果选择了其中一个值,则应显示该特定表中的ID。到目前为止这是我的代码:

HTML & PHP:

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);
}

1 个解决方案

#1

If you are doing jQuery (though I don't see any being used in your code example), you would use on():

如果你正在做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>