带有 PHP 和 jQuery 自定义选择菜单的下拉列表答案

【问题标题】：Dropdown List with PHP and jQuery Custom select menu带有 PHP 和 jQuery 自定义选择菜单的下拉列表
【发布时间】：2015-08-28 13:33:33
【问题描述】：

我想用 php 填充我的 sql 数据库中的下拉列表。

我创建了两个表：

CREATE TABLE IF NOT EXISTS `categories` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `category_name` VARCHAR(100) NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB;

CREATE TABLE IF NOT EXISTS `subcategories` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `categoryID` INT(11) NOT NULL,
  `subcategory_name` VARCHAR(100) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB;

创建一个 config.php 文件来存储数据库连接：

<?php

mysql_connect('localhost', 'root', '');
mysql_select_db('dependent_list');

?>

创建一个 index.php 文件：

<?php 
include('config.php'); 
$query_parent = mysql_query("SELECT * FROM categories") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#parent_cat").change(function() {
        $(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
        $.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
            $("#sub_cat").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    });

});
</script>
</head>

<body>
<form method="get">
    <label for="category">Parent Category</label>
    <select name="parent_cat" id="parent_cat">
        <?php while($row = mysql_fetch_array($query_parent)): ?>
        <option value="<?php echo $row['id']; ?>"><?php echo $row['category_name']; ?></option>
        <?php endwhile; ?>
    </select>
    <br/><br/>

    <label>Sub Category</label>
    <select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>

现在创建一个 loadsubcat.php 文件：

<?php 
include('config.php');

$parent_cat = $_GET['parent_cat'];

$query = mysql_query("SELECT * FROM subcategories WHERE categoryID = {$parent_cat}");
while($row = mysql_fetch_array($query)) {
    echo "<option value='$row[id]'>$row[subcategory_name]</option>";
}

?>

到目前为止一切正常。

但我想在链接上使用来自 jquerymobile 的自定义选择菜单： http://demos.jquerymobile.com/1.4.5/selectmenu-custom/

为此，我在 index.php 中更改此代码

<select name="parent_cat" id="parent_cat">

到：

<select name="parent_cat" id="parent_cat"  data-native-menu="false" class="filterable-select" data-iconpos="left">

对于子猫来自：

<select name="sub_cat" id="sub_cat"></select>

到：

<select name="sub_cat" id="sub_cat"  data-native-menu="false" class="filterable-select" data-iconpos="left">

选择菜单项出现在弹出窗口中，无法从数据库加载数据。

有什么帮助吗？

【问题讨论】：

标签： jquery drop-down-menu

【解决方案1】：

您正在通过调用 db call 创建选择框，它会动态生成选项。创建选项后，您需要在选择框上调用.selectmenu();。试试下面的代码 -

$(document).ready(function() {
    //apply custom select on parent category
    $("#parent_cat").selectmenu();

    $("#parent_cat").change(function() {
        $(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
        $.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
            $("#sub_cat").html(data);
            //apply custom select on sub category
            $("#sub_cat").selectmenu();

            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    });
});

注意 - 以上解决方案假设您已经包含自定义选择所需的 jquery 移动库。

【讨论】：

非常感谢您的帮助。第一个列表适用于您的代码，但第二个显示为空 sub_cat 为空。当然，我添加了包含的 jquery：
检查data对于$("#sub_cat").html(data);是否不为空，看看是否可以在不使用selectMenu()的情况下得到正常的选项列表。
当然非空。如果我从
我无法打开您发送的屏幕截图。你能解释一下这个问题吗？
当我像这样使用 html 时工作正常：<select name="parent_cat" id="parent_cat"> <select name="sub_cat" id="parent_cat"> 但是当我像这样使用第一个菜单（parent_cat）时它可以工作，但我显示的第二个菜单（sub_cat）不起作用空：<select name="parent_cat" id="parent_cat" data-native-menu="false" class="filterable-select" data-iconpos="left"></select><select name="sub_cat" id="sub_cat" data-native-menu="false" class="filterable-select" data-iconpos="left"></select>