如何使用jQuery，PHP和MySQL動態填充依賴選擇菜單？

我在這裏搜索了很多關於這個話題的內容。但我找不到解決我的問題的方法。如果你能幫助我，我會很感激的，這是我正在學習的一個學校項目。我有一個表（「Main_table」）和包括「扇區」和「sub_sector」列的數據庫。我想要有兩個選擇框，第一個將在「扇區」列中加載數據庫中的所有記錄，第二個將根據第一個選擇框的選擇值從「數據庫」列中的數據庫加載所有記錄。（例如：如果我在第一個選擇框中選擇「塑料」，則第二個選擇框應使用sub_sector值進行更新，其中扇區值等於「塑料」）。如何使用jQuery，PHP和MySQL動態填充依賴選擇菜單？

我已經設法從第一個選擇框的數據庫加載選項值，但是當我點擊任何選擇時，它不會加載任何選項到第二個選擇框。你可以找到下面的代碼。我沒有把「sector_options.php」放在下面，因爲它似乎工作得很好。如下所示

的index.html：如下所示

<script> 
$(document).ready(function() { 

$('#filter_sector') 
.load('/php/sector_options.php'); //This part works fine - uploads options to the first select box 

$('#filter_sector').change(function() { 
$('#filter_subsector').load('/php/subsector_options.php?filter_sector=' + $("#filter_sector").val() 
} //This part does not work - no options on the second select box 
); 
}); 

</script> 

<body> 
<div id="sectors"><p>Sector:</p> 
<select id="filter_sector" name="select_sector" multiple="multiple" size="5"> </select>  
</div> 

<div id="subsectors"><p>Sub Sector:</p> 
<select id="filter_subsector" name="select_subsector" multiple="multiple" size="5"> <option value="" data-filter-type="" selected="selected"> 
-- Make a choice --</option> 
</select> 
</div>  

</body> 
</html>

sector_options.php：如下所示

<?php 

$link = mysqli_connect("*******", "*******","******","********") or die (mysql_error()); 

$query = "SELECT sector FROM Main_table "; 

$result = mysqli_query($link, $query); 

while($row = mysqli_fetch_assoc($result)) { 
$options .= "<option value=\"".$row['sector']."\">".$row['sector']."</option>\n "; 
} 

echo $options; 

?>

subsector_options.php：

<?php 

$link = mysqli_connect("********", "*****,"*******", "********") or die (mysql_error()); 

$Sectors = $_REQUEST['filter_sector']; 

$query = "SELECT sub_sector FROM Main_table WHERE sector='$Sectors'"; 

$result = mysqli_query($link, $query); 

while($row = mysqli_fetch_assoc($result)) {$options .= "<option value=\"".$row['sub_sector']."\">".$row['sub_sector']."</option>\n "; 
} 

echo $options; 

?>

來源

2014-04-06 barutto

你當然可以這樣做，但對於一小組值來說，使用嵌套菜單要容易得多。看看['optgroup']（http://html5doctor.com/element-index/#optgroup） - 我個人認爲這個功能沒有得到充分利用。 – halfer

Yikes！你的AJAX腳本有SQL注入漏洞。如果您繼續這樣做，請查看'mysqli_real_escape_string'，或者更好的是使用參數化。 – halfer

對不起，我之前沒有使用過Ajax，所以我看不到我做錯了什麼。上面的代碼適用於第一個選擇框，但不適用於第二個選擇框。有沒有排隊，我應該刪除/添加/更正？感謝您的幫助， – barutto

爲了完整起見，溶液是：

檢查AJAX操作如何使用瀏覽器網絡監控
負載AJAX在瀏覽器標籤提取器腳本做的 - 在許多情況下，它們就會很愉快地在那裏，讓他們更容易調試
AJAX腳本返回HTML注射應該只有返回該HTML，而不是完整的HTML文檔。

來源

2014-04-06 17:21:30 halfer

如何使用jQuery，PHP和MySQL動態填充依賴選擇菜單？

回答

相關問題