带有 PHP 和 jQuery 自定义 select 菜单的下拉列表

Question

我想用 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 的自定义 select 菜单，就像在 link 上一样： 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">

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

有帮助吗？

Answer 1

您正在通过调用 db 调用创建 select 个框，它会动态生成选项。在为它创建选项后，您需要在 select 框上调用 .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 自定义 select.

所需的移动库

带有 PHP 和 jQuery 自定义 select 菜单的下拉列表

Dropdown List with PHP and jQuery Custom select menu

jquery

drop-down-menu