下拉列表与PHP和jQuery自定义选择菜单

问题描述：

我想填充我的下拉列表从我的sql数据库与PHP。下拉列表与PHP和jQuery自定义选择菜单

我创建两个表：

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">

的选择菜单项出现在弹出窗口并不能正常工作不是从数据库loade数据。

任何帮助？

答

您正在通过调用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： – rcweb

检查数据是否为空'$（“＃sub_cat”）。html（data）;'，看看你是否可以在不使用selectMenu（）的情况下获得正常的选项列表。 –

当然不是空的。如果我从

下拉列表与PHP和jQuery自定义选择菜单

相关推荐