动态下拉框?

2024-04-30

我有一个名为类别的数据库表,如下所示:

我正在尝试做一个动态下拉框,索引脚本显示为:

<?php

try {

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

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

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

    ?>
    <!DOCTYPE HTML>
   <html lang="en">
   <head>
<meta charset="utf-8" />
<title>Dependable dropdown menu</title>
<meta name="description" content="Dependable dropdown menu" />
<meta name="keywords" content="Dependable dropdown menu" />
<link href="/css/core.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
  <script src="/js/core.js" type="text/javascript"></script>
  </head>
  <body>

  <div id="wrapper">

<form action="" method="post">

    <select name="gender" id="gender" 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="category" id="category" class="update"
        disabled="disabled">
        <option value="">----</option>
    </select>

    <select name="colour" id="colour" class="update"
        disabled="disabled">
        <option value="">----</option>
    </select>       
</form>
</div>
</body>
</html>

update.php显示为:

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

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

try {

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

    $sql = "SELECT * 
            FROM `category`
            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));
}

第二个下拉框未显示依赖于第一个下拉框的值,如下所示:

有人能帮助我吗。


这是一个可以完成您想要的操作的示例。本质上,您可以使用 jQuery / AJAX 来完成此任务。

我更新了示例代码以匹配您的服务器登录/表/字段名称,因此如果您将这两个示例复制/粘贴到文件中(将它们称为tester.php and another_php_file.php)那么你应该有一个完整的工作示例可以使用。

我修改了下面的示例以创建第二个下拉框,其中填充了找到的值。如果你逐行遵循逻辑,你会发现它实际上非常简单。我留下了几行注释,如果未注释(一次注释),将向您显示脚本在每个阶段正在做什么。

文件 1 -- 测试仪.PHP

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
//alert('Document is ready');

                $('#stSelect').change(function() {
                    var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);

                    $.ajax({
                        type: "POST",
                        url: "another_php_file.php",
                        data: 'theOption=' + sel_stud,
                        success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
                            $('#LaDIV').html(whatigot);
                            $('#theButton').click(function() {
                                alert('You clicked the button');
                            });
                        } //END success fn
                    }); //END $.ajax
                }); //END dropdown change event
            }); //END document.ready
        </script>
    </head>
<body>

    <select name="students" id="stSelect">
        <option value="">Please Select</option>
        <option value="John">John Doe</option>
        <option value="Mike">Mike Williams</option>
        <option value="Chris">Chris Edwards</option>
    </select>
    <div id="LaDIV"></div>

</body>
</html>

文件 2 - another_php_file.php

<?php

//Login to database (usually this is stored in a separate php file and included in each file where required)
    $server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
    $login = 'root';
    $pword = '';
    $dbname = 'test';
    mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
    mysql_select_db($dbname) or die($connect_error);

//Get value posted in by ajax
    $selStudent = $_POST['theOption'];
    //die('You sent: ' . $selStudent);

//Run DB query
    $query = "SELECT * FROM `category` WHERE `master` = 0";
    $result = mysql_query($query) or die('Fn another_php_file.php ERROR: ' . mysql_error());
    $num_rows_returned = mysql_num_rows($result);
    //die('Query returned ' . $num_rows_returned . ' rows.');

//Prepare response html markup
    $r = '  
            <h1>Found in Database:</h1>
            <select>
    ';

//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
    if ($num_rows_returned > 0) {
        while ($row = mysql_fetch_assoc($result)) {
            $r = $r . '<option value="' .$row['id']. '">' . $row['name'] . '</option>';
        }
    } else {
        $r = '<p>No student by that name on staff</p>';
    }

//Add this extra button for fun
    $r = $r . '</select><button id="theButton">Click Me</button>';

//The response echoed below will be inserted into the 
    echo $r;

要回答评论中的问题:“如何使第二个下拉框填充仅与第一个下拉框中所选选项相关的字段?”

A. 内部.change对于第一个下拉列表的事件,您读取第一个下拉框的值:

$('#dropdown_id').change(function() {
var dd1 = $('#dropdown_id').val();
}

B. 在上述 AJAX 代码中.change()事件中,您将该变量包含在发送到第二个 .PHP 文件的数据中(在我们的示例中为“another_php_file.php”)

C. 您在 mysql 查询中使用该传入变量,从而限制了您的结果。然后这些结果被传回 AJAX 函数,您可以在success:AJAX 功能的一部分

D. 在该成功函数中,您使用修改后的 SELECT 值将代码注入到 DOM 中。

这就是我在上面发布的示例中所做的:

  1. 用户选择学生姓名,这会触发 jQuery.change()选择器

  2. 这是获取用户选择的选项的行:

    var sel_stud = $(this).val();

  3. 该值被发送到another_php_file.php,通过这行 AJAX 代码:

    data: 'theOption=' + sel_stud,

  4. 接收文件another_php_file.php在这里接收用户的选择:

    $selStudent = $_POST['theOption'];

  5. Var $selStudent(通过 AJAX 发布的用户选择)用于 mysql 搜索:

    $query = " SELECT * FROM `category` WHERE `master` = 0 AND `name` = '$selStudent' ";

    (当更改示例以适合您的数据库时,对 $selStudent 的引用被删除。但这(此处,上面)就是您使用它的方式)。

  6. 我们现在建立一个新的<SELECT>代码块,将 HTML 存储在名为的变量中$r。完全构建 HTML 后,我只需通过回显即可将自定义代码返回到 AJAX 例程:

    echo $r;

  7. 接收到的数据(自定义的<SELECT>代码块)在 AJAX 中可供我们使用success: function() {//code block},我可以在这里将它注入到 DOM 中:

    $('#LaDIV').html(whatigot);

瞧,您现在看到第二个下拉控件,它使用特定于第一个下拉控件中的选择的值进行自定义。

与非 Microsoft 浏览器类似。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

动态下拉框? 的相关文章

  • 如何淡化循环背景图像?

    这里的菜鸟 我试图让我的静态背景变成一个轮播 我当前的html看起来像这样 div class pageContent div 和我的CSS body background url http placehold it 1600x1200 n
  • SASS如何在旋转body时使页面完整的高度和宽度?

    我必须旋转我的身体并做到这一点全高 and 全屏宽度 嗯 我用的是vh公制并且非常适合width但身高还是不太合适 我不得不旋转 90 度但是height and width仍然指相同的方向not rotate PS 我添加了 red以便更
  • 如何动态添加和删除jquery选项卡?

    我有一个 aspx 页面 上面有 2 个静态 jquery 选项卡 单击其中一个选项卡上的按钮后 我想动态添加一个新选项卡 该选项卡从另一个 aspx 页面加载其内容 我也尝试使用以下示例 http jquery ui googlecode
  • 如何向 jQuery Tokeninput 添加占位符?

    如何将占位符添加到 jQuery Tokeninput 字段 一个正常的placeholder属性在这里不起作用 对于这样的输入
  • 将 jquery-mobile 与 Webpack 结合使用

    我正在尝试使用 webpack 加载 jquery mobile 但到目前为止还没有运气 我知道 jquery mobile 依赖于 jquery ui 而 jquery ui 又依赖于 jquery 如何在 Webpack 中设置这样的场
  • PHP函数返回值到html标签

    我想获取函数的返回值并将其显示到特定的id 在我的 Class php 中 我有一个名为 login 的函数 用于验证密码是否正确 不正确
  • 在 PHP 中使用数组来比较用户名/密码

    我有以下 php 脚本 其中有一个用户名和密码 Username user1 Password pass1 if isset POST submitform Clean up the input values foreach POST as
  • 除括号之间的内容外,所有内容均小写

    考虑以下字符串 LoReM FOO IPSUM dolor BAR Samet fooBar 我正在寻找一种方法来小写所有内容 除了 brackets 之间的内容应该被忽略 所以期望的输出是 lorem FOO ipsum dolor BA
  • 使用模态表单 ajax 超出 HTMLFormElement.toString 的最大调用堆栈大小

    我想使用模态窗口中的 ajax 请求提交表单 单击此链接可打开该模式 a class btn btn primary i class fa fa edit i Write a review a 模态窗口 div class modal fa
  • 如何使用 jQuery 向表中添加新行,并为其分配递增的 id

    我有一个现有的 HTML 表格 它是用户输入 GPS 点的表单的一部分 用户还可以选择上传 GPS 数据点 我想要一个用户可以按下的按钮 其中一些 Javascript 会向表中添加一个或多个新行 但新行必须继续增加表中使用的名称和 id
  • 如何使用xquery查找节点并向其添加子节点?

    是否可以使用xpath xquery查询特定的xml节点 然后向其导入 添加子节点 示例 代码取自http codepad org gJ1Y2LjM http codepad org gJ1Y2LjM 这是在类似的问题中提出的 但不相同 1
  • PHP:如何检查总数。 URL 中的参数?

    我正在使用 REQUEST 检索参数 有没有办法找到总数 URL 中的参数 而不是检索每个参数然后进行计数 这将为您提供总数 分隔的 URL 查询参数 count explode SERVER QUERY STRING 如果您只想要唯一的参
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • 如何滚动到div内的元素?

    我有一个滚动的div我想在点击它时发生一个事件 它会强制执行此操作div滚动以查看内部元素 我写的JavasCript是这样的 document getElementById chr scrollIntoView true 但这会在滚动时滚
  • 您可以使用 MySQL 查询来完整创建数据库的副本吗

    我有一个包含 5 个表的 MySQL 数据库的实时版本和一个测试版本 我不断使用 phpMyAdmin 将实时版本中的每个表复制到测试版本 有谁有mysql查询语句来制作数据库的完整副本吗 查询字符串需要考虑结构 数据 自动增量值以及与需要
  • jQuery 选择下一个

    我有一个简单的div布局html 有一个函数 当鼠标悬停在className为 personal icon email 的div上时 我将调用JS函数并显示className为 img info mask 的隐藏div div class
  • PHP 相当于朋友或内部

    php 中是否有相当于 朋友 或 内部 的东西 如果没有 是否有任何模式可以遵循来实现这种行为 Edit 抱歉 但标准 Php 不是我想要的 我正在寻找类似于马戏团长所做的事情 我有一些类在后端进行 C 风格的系统调用 并且杂耍已经开始变得
  • 有关于 PHP 中的 V8JS 的文档吗?

    有没有关于V8JS的文档 我是否只需要标准 PHP 或一些扩展即可使用 V8JS 我将非常感谢有关 PHP 中的 V8JS 的任何信息 要求 PHP 5 3 3 和 V8 库和标头安装在正确的路径中 Install http www php
  • 您如何看待引导模式触发器的相应回调?

    On 引导模态 http getbootstrap com javascript modals 我们知道我们可以为触发器绑定事件 例如show or hide using show shown hide hidden 但此事件绑定仅适用于一
  • jQuery:动态添加 DOM 元素时尝试将函数挂钩到 onclick,但它立即执行该函数

    我正在使用 jQuery 动态 我的意思是在运行时 向页面的 DOM 添加一个 span 元素 create add task button document createElement span attr id activityNameH

随机推荐

  • 更改 Word 文档的页边距

    我创建了一个带有按钮的 Web 部件 单击该按钮后会生成一个包含特定列表的列表项值的 Word 文档 我希望能够更改文档的边距 顶部 底部边距 但我不确定如何继续 谁能阐明如何实现这一目标 到目前为止 我的代码如下 void Generat
  • 从 ggplot 转换时,plotly 会删除分组图例(按颜色、按符号)

    我不太明白为什么当我转换由ggplot to plotly using ggplotly The 情节帮助页面 https plotly com ggplot2 legend 没有任何信息 我认为他们的示例在该页面上甚至无法正常工作 任何帮
  • GLSL - 计算表面法线

    我有一个用 GLSL 编写的简单顶点着色器 我想知道是否有人可以帮助我计算表面的法线 我正在 升级 一个平面 所以当前的灯光模型看起来 很奇怪 这是我当前的代码 varying vec4 oColor varying vec3 oEyeNo
  • 在 R 中生成具有不同样本大小的多项式随机变量

    我需要生成具有不同样本大小的多项随机变量 假设我已经生成了样本大小 如下所示 samplesize c 50 45 40 48 然后我需要根据这个不同的样本大小生成多项随机变量 我尝试使用 for 循环并使用 apply 函数 sapply
  • 将表达式转换为带有扭曲的合取范式

    我有一个必须与之交互的库 它基本上充当数据源 检索数据时 我可以将特殊的 过滤表达式 传递给该库 稍后将其转换为 SQL WHERE 部分 这些表达方式非常有限 它们必须是合取范式 喜欢 A or B or C and D or E or
  • readRDS 无法读入 R 中的文件。是否有替代方案?

    我正在尝试读取从此处下载的 RDS 文件 https github com jheng5 googleCharts tree master inst examples bubble https github com jcheng5 goog
  • “班级未注册”是哪个班级?

    考虑这段代码 try ISomeObject pObj uuidof SomeClass ISomeObject pObj2 uuidof SomeOtherClass catch com error e Log what failed I
  • 如何使用 dotenv 从 .env 和 .env.local 加载环境变量?

    这可能看起来像一个新手问题 但我无法找到使用 dotenv 从节点中的 env 和 env local 文件加载环境变量的方法 有可能吗 如果不使用 dotenv 现在人们如何从这两个文件加载环境变量 引用自 dotenv 的 npm 页面
  • Node.js 支持的操作系统

    是否有关于 Node js 支持的确切操作系统的官方声明 我唯一能找到的是this one https docs appdynamics com display PRO42 Node js Supported Environments No
  • 为路径创建别名

    是否可以在 PowerShell 中为路径创建别名 例如 我必须一直写下去 PS PS C Users Jacek gt cd C windows microsoft net framework v4 0 30319 如果我能写我会很高兴
  • 在python中向量化6个for循环累积和

    数学问题是 总和中的表达式实际上比上面的表达式复杂得多 但这是一个最小的工作示例 以免事情过于复杂 我使用 6 个嵌套 for 循环在 Python 中编写了此代码 正如预期的那样 即使在 Numba Cython 和朋友的帮助下 它的性能
  • 我想使用 java 8 Date Time API 从亚洲/加尔各答的时间计算亚洲/迪拜时区的时间

    ZoneId dubai ZoneId of Asia Dubai LocalDate localDate LocalDate now LocalTime localTime LocalTime now ZonedDateTime zone
  • 尝试从 Java 调用简单的 Oracle PROCEDURE 时索引无效

    根据该过程是否针对生产数据库运行 以下 SQL 块在调用时成功显示 Y 或 N DECLARE v is prod VARCHAR2 1 BEGIN FDS APPS FDS USR SEC PKG2 IS RUNNING IN PRODU
  • 即使没有任何内容,也会出现 Notepad++ XML 解析错误“文档末尾有额外内容”

    当我尝试在 Notepad 中验证 55 mb XML 文件时 收到上述错误消息 第一个遇到的错误在这里 第 1441520 行 共 22258651 行 Notepad 的屏幕截图 https i stack imgur com 9Atc
  • 如何以 REST方式发送 HTML 表单?

    我有一个名为 事实 的资源集合的 URI 以及该集合中每个 事实 资源的 URI 我相信 创建新 事实 的表单应该使用 GET 来请求 但我无法确定应该将其设置为哪个 URI 对集合 URI 的 GET 应返回 事实 资源 URI 的列表
  • 在 C++11 中按值或引用使用 lambda 默认捕获的缺点?

    使用 lambda 默认按值捕获有哪些陷阱 或通过引用 在 C 11 中 我知道一些陷阱 例如 如果从 lambda 创建的闭包的生命周期超过了局部变量的生命周期 闭包中的引用将悬空 默认按值捕获有什么缺点吗 我认为你提到的悬空参考问题是主
  • TypeScript / JavaScript - 导入所有类型

    如何从某个文件导入所有类型 假设我有myClass ts and otherClass ts 我想从中导入所有课程otherClass ts 我见过很少的导入语法 import ClassA ClassB ClassC from other
  • 清除另一个应用程序的 Symfony 缓存

    我想通过后端应用程序中的操作清除前端应用程序的缓存 我怎样才能实现这个目标 我相信在 symfony 1 2 中执行此操作的正确方法如下 sfContext switchTo frontend switch to the environme
  • 如何在 Kotlin 中列出字段注释?

    我有一个注释 public interface Field String value 和java类 由它注释 public class Animal Field name private String name 我尝试通过下一个代码列出所有
  • 动态下拉框?

    我有一个名为类别的数据库表 如下所示 我正在尝试做一个动态下拉框 索引脚本显示为