Question

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

HTML＆amp; 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>

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

1 个答案: