根据下拉选择从数据库填充另一个选择下拉菜单

我正在构建一个网站来学习编码，并试图构建一个工具，其中用户单击包含某些从数据库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

根据下拉选择从数据库填充另一个选择下拉菜单

回答

相关问题