下拉列表與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數據。

任何幫助？

來源

2015-08-28 rcweb

您正在通過調用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移動圖書館。

來源

2015-08-28 05:33:33

非常感謝您的幫助。第一個列表適用於您的代碼，但第二個列表空 sub_cat爲空。當然我添加了包含jquery： – rcweb

檢查數據是否爲空'$（「＃sub_cat」）。html（data）;'，看看你是否可以在不使用selectMenu（）的情況下獲得正常的選項列表。 –

當然不是空的。如果我從

下拉列表與PHP和jQuery自定義選擇菜單

回答