一个下拉框有助于填充另一个 - One drop down box helps populates the other

我有一个使用两个下拉菜单将数据插入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";

有人能和我谈谈吗？而且我的技能非常有限，所以一个相对简单的解决方案会很棒。Thankmark

为此，您必须了解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>

您必须编写另一个文件，该文件使用从自行车列表值中选择的第一个的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']的自行车的值，并进行查询，然后填写列表

我最近不得不自己做这件事。以下是我所做的，请随意使用对你有意义的东西。我尝试了一种对自己来说似乎很简单的方法。

<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!";
    }

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

前一天我在帮助别人一个类似的页面：

2下拉选择，并且第二下拉中的选项列表根据第一下拉中选择的选项而改变。

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

请参阅这里的问题：jQuery-在页面加载时选择optgoup，子级在第二个选择中通过父级中的默认选择选项选择

在这里查看代码的作用：http://jsfiddle.net/goodegg/phj8q/（尽管其中有一个错误）。

编辑

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