0

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

谁能告诉我这个？我的技能也非常有限，所以一个相对简单的解决方案会很棒。感恩节

4

4 回答 4

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>
于 2013-08-14T20:01:43.990 回答
0

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

于 2013-08-14T20:25:08.893 回答
0

一天前或之前我正在帮助某人提供类似的页面：

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

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

有关问题，请参见此处：jQuery - 在页面加载时选择 optgoup 和第二次选择中的子项，通过父项选择中的默认选择选项

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

编辑

去这里查看我的分叉版本的代码：http: //jsfiddle.net/annabels/7xksa/

于 2013-08-14T20:42:25.153 回答
0

我最近不得不自己做这件事。这就是我所做的，请随意使用对您有意义的内容。我尝试了对自己来说似乎很简单的方法。

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

我希望这有帮助。我比较忙，所以暂时无法详细解释。我稍后再回来看看您是否有任何问题。

于 2013-08-14T20:41:50.393 回答