php - PHP Mysql - 如何使用 javascript 创建动态下拉列表？

Question

我对脚本完全陌生，基本上我必须尝试完成一个关于辅导旅游项目的学校项目。这个想法是允许客户注册和预订旅游。

我遇到的问题是，我不知道如何创建一个动态下拉列表，其中预订表格将从 mysql 数据库中获取数据。

比如说：

客户需要从第一个下拉列表中选择旅游，即（工业、文化、军事）。
选择旅游后，下一个下拉列表应列出目的地，即（英国、法国、德国等），具体取决于上述（旅游）选择。
然后第三个列表应显示取决于上述（目的地）选择的开始日期。

下拉列表中的所有数据都应来自数据库。此外，当客户提交表单时，所有这些数据都应进入数据库中的客户预订表。

有人告诉我 javascript 应该是答案，但我搜索了很多论坛并查看了所有令人困惑的教程。所以特地来这里问问！非常感谢有关如何执行此操作的任何帮助。谢谢！

以下是我只知道如何执行此操作的代码：

           <h2><center>PLEASE PLACE YOUR BOOKING</center></h2>


<form action="booking.php" method="post">
<table width="700 border="0" align="center" cellpadding="0" cellspacing="0">
    <tr><td width="210" height="45">Tour Type:</td><td>
            <select name="tour_type">
            <option value="Cultural">Cultural</option>
            <option value="Industrial">Industrial</option>
            <option value="Military">Military</option>
     </select></td></tr>

    <tr><td width="210" height="45">Duration:</td><td>
            <select name="duration" >
            <option value="1_Day">1_Day</option>
            <option value="7_Days">7_Days</option>
            <option value="14_Days">14_Days</option>
        </select></td></tr>      

    <tr><td width="210" height="45">Destination:</td><td>
            <select name="destination" >
            <option value="England">England</option>
            <option value="Wales">Wales</option>
            <option value="Scotland">Scotland</option>
            <option value="France">France</option>
            <option value="Belgium">Belgium</option>
            <option value="Germany">Germany</option>
        </select></td></tr>

    <tr><td width="210" height="45">No. of Passengers:</td><td>
            <select name="no_of_passengers" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select></td></tr>

    <tr><td width="210" height="45">Depature:</td><td>
            <select name="departure" >
            <option value="13 May 2013">13 May 2013</option>
            <option value="28 May 2013">28 May 2013</option>
            <option value="11 June 2013">11 June 2013</option>
            <option value="26 June 2013">26 June 2013</option>
            <option value="14 July 2013">14 July 2013</option>
            <option value="27 July 2013">27 July 2013</option>
        </select></td></tr>

    <tr><td width="210" height="45"><input type="checkbox" name="accomodation" 
     value="YES"/>Accomodation</td></tr>
    <tr><td width="210" height="45"><input type="checkbox" name="mailshot" 
    value="YES"/>Mailshot</td></tr>
    <tr><td width="210" height="45"><input type="submit" name="submit" value="submit"></td></tr>
    </table>
    </form>
</html>

    <?php
//When submit button is pressed.
if (isset($_POST['submit'])) {

//Include the server and database connection. 
include('cn.php');

session_start();

//retrieve data input from booking form and make it equal to the variable ($)
$tour_type = $_POST['tour_type'];
$duration = $_POST['duration'];
$destination = $_POST['destination'];
$no_of_passengers = $_POST['no_of_passengers'];
$departure = $_POST['departure'];

// accomodation confirmation
if (isset($_POST['accomodation'] ))
{$accom = $_POST["accomodation"];
} else {
$accom = "NO";
}

// mailshot confirmation
if (isset($_POST['mailshot'] ))
{$mail = $_POST["mailshot"];
} else {
$mail = "NO";
}

$userUsername = $_SESSION['loggedInUser'];

// Build the SQL query to retreive the variables ($) and input the data into the database.
$sql = "INSERT INTO booking 
      (user_id,tour_type,duration,destination,no_of_passengers,departure,accomodation,mailshot) 
VALUES ((SELECT user_id FROM user WHERE user_username = '" . 
       $userUsername . "'),'$tour_type','$duration','$destination',
       '$no_of_passengers','$departure','$accom' ,'$mail')";



// test the sql statement.
if(!mysql_query($sql,$cn)) {
die(mysql_error($cn));

}
// direct to this page when booking is successful.
header('Location: booking_success.php');
}

?>

score 2 · Accepted Answer

我有一个类似的问题。我找到了一个真正有效的指南，他在哪里解释了他的工作。阅读它时应该记住的一件事是，它使用的 Jquery 版本与最新版本不同，因此语法上存在一些差异。这些差异虽然很小，但可以在评论中找到。

http://www.ssdtutorials.com/tutorials/series/dependable-dropdown.html

在您的情况下，它看起来像这样：

SQL

创建三个表，一个名为 id(Integer)，一个名为 master_id(Integer)，一个名为 names(varchar)。

Id将从 1->x 开始（意味着最后一行是数字 x）。 对于第一个下拉军事等中的项目， master_id将为 0。您想要进入军事类别的所有项目都将具有与军事作为 id 相同的 master_id 值，例如 1。您遵循此原则以及所有子类别和日期。名字只是一个标签...

主站 php/HTML

Html 看起来像这样，您将脚本放在站点头部的 php 中。

?php
try {

 $objDb = new PDO('mysql:host=localhost;dbname=tour', 'root', 'root');
 $objDb->exec('SET CHARACTER SET utf8');

 $sql = "SELECT * 
  FROM `region`
  WHERE `master_id` = 0";
 $statement = $objDb->query($sql);
 $list = $statement->fetchAll(PDO::FETCH_ASSOC);

 } catch(PDOException $e) {
 echo 'There was a problem';
 }

 ?>

这是表格。

    <select name="tour" id="tour" class="update">
        <option value="">Select one</option>
        <?php if (!empty($list)) { ?>
            <?php foreach($list as $row) { ?>
                <option value="<?php echo $row['id']; ?>">
                    <?php echo $row['name']; ?>
                </option>
            <?php } ?>
        <?php } ?>
    </select>

    <select name="location" id="location" class="update"
        disabled="disabled">
        <option value="">----</option>
    </select>

    <select name="date" id="date" class="update"
        disabled="disabled">
        <option value="">----</option>
    </select>

</form>

记得将 jquery 和 corect 路径添加到 ajax 脚本中。

PHP 函数

       <?php
  if (!empty($_GET['id']) && !empty($_GET['value'])) {

$id = $_GET['id'];
$value = $_GET['value'];

try {

    $objDb = new PDO('mysql:host=localhost;dbname=tour', 'root', 'password');
    $objDb->exec('SET CHARACTER SET utf8');

    $sql = "SELECT * 
            FROM `categories`
            WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {

        $out = array('<option value="">Select one</option>');

        foreach($list as $row) {
            $out[] = '<option value="'.$row['id'].'">'.$row['name'].'</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));

    } else {
        echo json_encode(array('error' => true));
    }

} catch(PDOException $e) {
    echo json_encode(array('error' => true));
}

   } else {
echo json_encode(array('error' => true));
  }

ajax.js - 脚本

     var formObject = {
run : function(obj) {
    if (obj.val() === '') {
        obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
    } else {
        var id = obj.attr('id');
        var v = obj.val();
        jQuery.getJSON('func/tour_function.php', { id : id, value : v }, function(data) {
            if (!data.error) {
                obj.next('.update').html(data.list).removeAttr('disabled');
            } else {
                obj.nextAll('.update').html('<option value="">----   </option>').attr('disabled', true);
            }
        });
    }
}
  };
  $(function() {

$('.update').on('change', function() {
    formObject.run($(this));
});

 });

只要记住正确的路径并包含 Jquery 1.9.1，它应该可以工作。

score 1 · Accepted Answer

指出此站点上已有的答案 Ajax 方法根据第一个中的选择填充第二个动态下拉列表

本质上，简短版本将是一个从您的服务器加载数据的 onchange 事件

<select name="first_dropdown" onchange="$('#dropdown2_container').load('your_script.php?nid='+this.value);">
    <option....
</select>
...
<div id="dropdown2_container" style="display:none"> </div>

我不是像这样突兀的 javascript 的忠实粉丝，但这对你来说是一个开始。如果您想要更优雅的东西，请尝试以下链接。

http://www.99points.info/2010/12/n-level-dynamic-loading-of-dropdowns-using-ajax-and-php/

至少有一点应该让你开始。

score 0 · Accepted Answer

您可以采取几种方法。由于您是脚本新手，我建议此时避免使用 AJAX。您需要以下内容：

在服务器端 (PHP)，将数据输出到您可以使用的 JavaScript 变量中。例如，您可以将数据存储在数组中。

例子：var tours = [{ id:1, name:"Tour#1" }, { id:2, name:"Tour#2" }, etc.]
您需要将所有旅游数据、目的地数据和开始日期加载到脚本中，并包含足够的信息来链接哪些子记录属于哪些父记录。
当页面第一次加载时，旅游数据应该填充到第一个下拉列表中，但是第二个和第三个应该是空白的，因为它们是基于前面的填充的。
当用户对下拉列表值（onchange事件）进行更改时，然后应用逻辑以根据上一个下拉列表中的选择将条目加载到下一个下拉列表。

例子：<select id='tours' onchange='changetour();'></select>
您还需要处理用户清除选择的情况（在这种情况下清除所有子选择），或者用户返回第一个下拉列表并在他们已经选择了某些内容后更改他们的选择第二和第三。

这应该让您对开始使用的算法有一个粗略的了解。我建议您在上面的每个项目上尽最大努力，并在您尝试编写解决方案并遇到特定问题后返回特定问题。

php - PHP Mysql - 如何使用 javascript 创建动态下拉列表？

3 回答 3

SQL

主站 php/HTML

PHP 函数

ajax.js - 脚本

Related

Reference