根據下拉選擇從數據庫填充另一個選擇下拉菜單

我正在構建一個網站來學習編碼，並試圖構建一個工具，其中用戶單擊包含某些從數據庫cat拉出的類別名稱的選擇/下拉菜單，然後從數據庫subcat中提取的子類別名稱將出現另一個選擇。這幾乎和Yelp的一樣（歸類到）like Yelp's (go down to the categories)。根據下拉選擇從數據庫填充另一個選擇下拉菜單

我也做了一個圖：

enter image description here

我已經有一個類別下拉式選單，從貓數據庫中提取：

<p><b>Category:</b><br /> 
<?php 
    $query="SELECT id,cat FROM cat"; 
    $result = mysql_query ($query); 
    echo"<select name='cselect3' class='e1'><option value='0'>Please Select A  Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
    echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; 

    } 

echo"</select>"; 
?>

而且我有一個是從拉SUBCAT subcat數據庫：

<p><b>Subcat1:</b><br /> 
<?php 
    $query="SELECT id,subcat FROM subcat"; 
    $result = mysql_query ($query); 
    echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
     echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; 

    } 

echo"</select>"; 
?>

如何根據用戶在類別上單擊的內容製作子類別下拉菜單並使其自動顯示？非常感謝您的幫助！

來源

2012-07-24 infinity

我只是把變量放在JavaScript與PHP，然後使用JavaScript函數..沒有jQuery或AJAX需要。

但是你需要有子類別的外鍵不管是什麼..即 - 對於SUBCAT表中的每個記錄，你需要給它一個CATID所以引用...

<?php 
    $db = new mysqli('localhost','user','password','dbname');//set your database handler 
    $query = "SELECT id,cat FROM cat"; 
    $result = $db->query($query); 

    while($row = $result->fetch_assoc()){ 
    $categories[] = array("id" => $row['id'], "val" => $row['cat']); 
    } 

    $query = "SELECT id, catid, subcat FROM subcat"; 
    $result = $db->query($query); 

    while($row = $result->fetch_assoc()){ 
    $subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']); 
    } 

    $jsonCats = json_encode($categories); 
    $jsonSubCats = json_encode($subcats); 


?> 

<!docytpe html> 
<html> 

    <head> 
    <script type='text/javascript'> 
     <?php 
     echo "var categories = $jsonCats; \n"; 
     echo "var subcats = $jsonSubCats; \n"; 
     ?> 
     function loadCategories(){ 
     var select = document.getElementById("categoriesSelect"); 
     select.onchange = updateSubCats; 
     for(var i = 0; i < categories.length; i++){ 
      select.options[i] = new Option(categories[i].val,categories[i].id);   
     } 
     } 
     function updateSubCats(){ 
     var catSelect = this; 
     var catid = this.value; 
     var subcatSelect = document.getElementById("subcatsSelect"); 
     subcatSelect.options.length = 0; //delete all options if any present 
     for(var i = 0; i < subcats[catid].length; i++){ 
      subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id); 
     } 
     } 
    </script> 

    </head> 

    <body onload='loadCategories()'> 
    <select id='categoriesSelect'> 
    </select> 

    <select id='subcatsSelect'> 
    </select> 
    </body> 
</html>

來源

2012-07-24 18:03:58 dano

你會發現我從subcat選擇catid以及您可以將subcats與貓..這是必要的 – dano 2012-07-24 18:04:59

嘿感謝！工作很棒！我怎麼才能做到這一點，就像那樣做三組下拉？ – infinity 2012-07-24 18:57:09

是的沒問題..第三個下拉爲基礎的第二個下拉我假設？ – dano 2012-07-24 19:42:04

如果您使用的是AJAX，您需要將第二個代碼作爲一個單獨的php文件，您將通過AJAX調用該文件。在AJAX調用的回調中，只要（僞代碼）：someContainingDivOrSomething.innerHtml = responseBody;。

請注意，直接在PHP顯示文件中查詢（關注點分離）通常是一個糟糕的主意。還有其他一些可以改進的地方。但是，這會讓你開始。

來源

2012-07-24 17:43:19

由於子類別下拉列表中的數據取決於類別中選擇的內容，因此您可能需要使用ajax。你可以在你的類別下拉菜單中設置一個事件監聽器，當它發生變化時，你可以請求子類別的數據下拉並填充它，有很多不同的方法可以解決它，下面是一個選項（使用jquery）讓你開始。

// warning sub optimal jquery code 
$(function(){ 

    // listen to events on the category dropdown 
    $('#cat').change(function(){ 

     // don't do anything if use selects "Select Cat" 
     if($(this).val() !== "Select Cat") { 

      // subcat.php would return the list of option elements 
      // based on the category provided, if you have spaces in 
      // your values you will need to escape the values 
      $.get('subcat.php?cat='+ $(this).val(), function(result){ 
       $('#subcat').html(result); 
      }); 

     } 

    }); 

});

來源

2012-07-24 17:49:07

化妝着陸頁

<p><b>Category:</b><br /> 
<?php 
    $query="SELECT id,cat FROM cat"; 
    $result = mysql_query ($query); 
    echo"<select name='cselect3' onChange='loadSubCats(this.value)' class='e1'><option value='0'>Please Select A  Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
    echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; 

    } 

echo"</select>"; 
?> 

<div id='sub_categories'></div>

在這個網站結構，使您的load_sub_cats.php分配給該類別的下拉

function loadSubCats(value) 
{ 
    $.post('load_sub_cats.php',{catid : value},function{data} 
              { 
               $('#sub_categories').html(data); 

              }); 

}

現在是一個js函數

<p><b>Subcat1:</b><br /> 
<?php 
    $catid = $_POST['cat_id'] 
    $query="SELECT id,subcat FROM subcat where catid = $catid"; 
    $result = mysql_query ($query); 
    echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
     echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; 

    } 

echo"</select>"; 
?>

你會需要將jquery包含到此代碼工作中。

來源

2012-07-24 17:57:15

根據下拉選擇從數據庫填充另一個選擇下拉菜單

回答

相關問題