将数据库内容放入下拉列表并从选定的下拉列表中显示数据库信息

Question

我的问题是我有 2 个 dropdowns 从我的 DB 中获取内容，一个简单的 SELECT * 带有类别，然后 select 从中获取一个项目类别。

First dropdown : "dropdown_type" is the category.

Second dropdown : "dropdown_abo" is the item.

在第二个下拉菜单中，我使用了一个 JQuery 插件，它可以在下拉菜单中进行搜索，以便比滚动更快地获取项目（其中会有很多项目）。可以看到插件here

当您 select 第二个下拉列表中的项目时，下面的 div(abo_info) 将显示 selected 项目的所有信息。

我的问题是我卡住了，不知道如何继续。我怎样才能做到这一点，当我 select 一个类别，然后是一个项目时，我从下面 div 中显示的那个项目中获取内容？

我正在使用 PHP、JQuery 和 Mysql_*（数据库连接，知道 PDO 但我不太擅长）。

我可以在这里得到一些帮助，或者一些关于如何完成的例子吗？

I have made a JSfiddle so you can see the complete code

Answer 1

你似乎走在了正确的道路上，而且做得很好。

请以下列步骤为指导进一步进行，

使用 jQuery.ajax() or jQuery.post() 您基本上可以将请求发送到 PHP 文件。
在 PHP 文件中，您可以使用 PDO 或普通 mySQL 连接器连接到您的数据库，并且 return 您需要的数据返回到 AJAX 调用。
可以在 HTML 部分根据需要呈现和显示 returned 数据。

请使用以下这些参考资料，它们可以让您更好地理解代码：

Beginner’s Guide to Ajax Development with PHP
jQuery Ajax POST example with PHP

Answer 2

如@WisdmLabs 所述，您走在正确的轨道上...

继续的步骤应该是：

选择两个下拉框后添加一个 JS 事件（使用 onchange() 或提交按钮）
该事件将触发 AJAX 请求 PHP 文件 POST 您要为其获取数据的项目的数据。
在 PHP 文件中，您将运行您的 SQL 查询并发回所需的信息 - 最好是 json。
在 JS AJAX 函数中，您将获得 Json 对象并将需要的信息插入到页面中 DOM

JS代码

$(".dropboxClass").change(function(){ // you can use a button instead or any other event type
    // here you can first check that bothdropboxes were selected 

    // now get the values of the dropboxes
    drop1 = $("#dropbox1").val();
    drop2 = $("#dropbox2").val();

    // run the AJAX request for the PHP file
    var request = $.ajax({
                    url: 'test2.php',
                    dataType: "json" ,
                    method: "POST",
            data: { d1: drop1, d2:drop2 } 
                });

        request.done(function(itemData){
            // here you will get the Json object , get the data you need and insert into the DOM
            console.log('Status:' + itemData['status']);
            console.log('Name:' + itemData['name']);

            alert('success');
        });

        request.fail(function(){
            // AJAX call failed - do something.....
        });
});

PHP 脚本

// connect to your DB and get the data you need into an array 

$DB_data = array(
    "status"=>"code",
    "name"=>"item Name",
    "desc"=>"Item Description"
);

echo json_encode($DB_data);

将数据库内容放入下拉列表并从选定的下拉列表中显示数据库信息

Get DB content into dropdown and show DB info from selected dropdown

php

jquery

mysql

select