Question

我有一个表单可以将数据插入到使用两个下拉菜单的MySQL表中。第一个是公园列表，第二个是游乐设施列表。第二个下拉框应该只显示通过“park_id”列链接到第一个的项目。我需要一个简单的方法，根据第一个选择填充第二个框。

这是迄今为止的表格：

<tr><td>Select Park:</td>
    <td><select name="park_id">
    <option value="">Select Park</option>

<?php   foreach ($res as $row) {
    printf('<option value="%s">%s</option>' . PHP_EOL, $row['park_id'], $row['name'] );
 } ?>
    </select></td></tr>


    <tr><td>Select Ride:</td>
    <td><select name="ride_id">
    <option value="">Select Ride</option>

<?php   foreach ($res2 as $row2) {
    printf('<option value="%s">%s</option>' . PHP_EOL, $row2['ride_id'], $row2['name'] );
 } ?>
    </select></td></tr>

所以不知何故，选择公园后需要运行查询并使用'$ park_id = $ row [park_id]'来帮助生成“选择乘车”下拉列表的结果。

这是我需要用于第二次下拉的查询：

$qry2 = "SELECT ride_id, name FROM tpf_rides WHERE park_id = $park_id ORDER BY name ASC";

有人可以通过这个跟我说话吗？我的技能也很有限，所以一个相对简单的解决方案会很棒。 Thanksark

Answer 1

为此你必须进入AJAX，我强烈建议使用jQuery的实现。您还需要掌握JSON字符串编码和解码。

您的代码的基本理念如下：

// listen for user to change the <select> item
$('select#park').on('change', function(){

    $.ajax({
        url: 'getrides.php' // send a park id to this script
        ,cache: false  // do not cache results in browser
        ,type: 'POST' // send POST to getrides.php
        ,data: {'park_id': $('select#park').val()} // getrides.php will receive $_POST['park_id']
        ,dataType: 'json' // this AJAX call expects a JSON string as a return value
        ,success: function(data){ // the data variable will be converted to an array from JSON

            // check out all your data
            console.log(data);

            // loop through your array
            $.each(data, function(index, info){

                // see your array indexes
                console.log(index);

                // see data in each array item
                console.log(info);
            });
        }
});

<强>更新

您还可以将所有公园和游乐设施加载到Javascript阵列中，并根据用户从下拉列表中选择的内容，然后使用这些阵列成员填充第二个下拉列表。

<script>
var rides = new Array();
rides['park1'].push('ride1');
rides['park1'].push('ride2');
rides['park1'].push('ride3');
rides['park1'].push('ride4');
rides['park1'].push('ride5');
rides['park2'].push('ride1');
rides['park2'].push('ride2');
rides['park2'].push('ride3');
rides['park2'].push('ride4');
rides['park2'].push('ride5');

// listen for user to change the <select> item
$('select#park').on('change', function(){

    // clear current DD options
    $('select#rides').html();

    // loop through array of available rides for selected park
    $.each(rides[''+$(this).val()+''], function(index, value){

        // dynamically create the proper DD options
        $('select#rides').append('<option>'+value+'</option>');
    });

});
</script>

Answer 2

您必须编写另一个文件，该文件使用从自行车列表值中选择的第一个的ID来加载第二个选择标记的选项乘坐列表

然后在第一个文件上创建一个空div，该文件将加载第二个文件的结果，该文件是游乐设施列表

$(function() {
  $('#ID_of_the_park_selecttag').change(function() {
    var value = $("#ID_of_the_park_selecttag").find('option:selected').text();
         $("#ID_OF_THE_DIV").html("");
      $("#ID_OF_THE_DIV").load('theOtherFile.php', {"bikename":value } );// value is the value of the select option from the first <select tag>
  });});

然后在第二个文件中，您可以获得选择为$_POST['bikename']的自行车的价值并执行查询然后填写列表

Answer 3

我最近自己必须这样做。这就是我所做的，随意使用对你有意义的东西。我尝试了对自己来说似乎很简单的方法。

<select name="department_list" id="department_list" onchange="$('#singleUser').load('yourextraphppage.php?nid='+this.value);">
<option value='none'>Select a department</option>

然后加载包含数据的第一个选择列表并关闭选择标记...在第二个选择的位置添加一个空白div。我使用第一个选择列表中的值作为第二个选择列表查询的参数。（这是第二个选择列表第二个表中的外键）

<div id="singleUser" class="singleUser">
</div>

最后，您需要从第一个选择列表中调用的其他PHP页面。这是我的代码的准系统版本。

echo "<option value='none'>Select user</option>";

try {
$db = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);

    $stmt = $db->prepare("SELECT dm.empid AS empid, u.name AS name FROM mytable dm
                JOIN mytable2 u ON dm.empid = u.id 
                WHERE dm.deptid = :id
                ORDER BY u.name");
    $stmt->bindParam(':id', $id);
    $stmt->execute();
    while ($r = $stmt->fetch()) {
    $empid = $r['empid'];
            $userName = $r['name'];

           echo "<option value='".$empid."'>".$userName."</option>"; 

}
echo "</select>";
echo "</p>";
$db = null;
}
catch (PDOException $ex) {
    echo "An Error occurred!";
    }

我希望这会有所帮助。我很忙，所以我现在不能详细解释它。我稍后会回来查看你是否有任何问题。

Answer 4

我每天或之前都在帮助某人一个类似的页面：

2下拉选择，第二个下拉列表中的选项列表根据第一个选择中选择的选项进行了更改。

解决方案涉及在<optgroup>和 jQuery 中使用<select>元素（这对于初学者来说并不是那么容易，但至少可以复制代码。

请在此处查看问题：jQuery - on page load select optgoup and children in second select by a default selected option in a parent select

在此处查看此处的代码：http://jsfiddle.net/goodegg/phj8q/ （虽然它有一个错误）。

修改

转到我的代码的分叉版本：http://jsfiddle.net/annabels/7xksa/

一个下拉框有助于填充另一个

4 个答案: