6

私はコーディングを学ぶためにウェブサイトを構築しており、ユーザーがデータベースcatから取得したいくつかのカテゴリ名を含む選択/ドロップダウンをクリックすると、データベースsubcatから取得したサブカテゴリ名で別の選択が表示されるツールを構築しようとしています。これは、Yelp（カテゴリに移動）のようなYelp（カテゴリに移動）とほぼ同じです。

また、図を作成しました。

ここに画像の説明を入力してください

私はすでに猫のデータベースからプルしているカテゴリのドロップダウンを持っています：

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

そして、私はサブキャットデータベースからプルしているサブキャットを持っています：

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

ユーザーがカテゴリをクリックした内容に基づいてサブカテゴリのドロップダウンを作成し、それを自動的に表示するにはどうすればよいですか？助けてくれてありがとう！

4

4 に答える 4

20

変数をphpでjavascriptに入れてから、javascript関数を使用します。jqueryやAJAXは必要ありません。

ただし、サブカテゴリには外部キーが必要です。つまり、サブキャットテーブルのすべてのレコードに対して、参照用に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-24T18:03:58.387 に答える
3

サブカテゴリドロップダウンのデータは、カテゴリで選択されているものに依存するため、おそらくajaxを使用することをお勧めします。カテゴリドロップダウンでイベントリスナーを設定できます。イベントリスナーが変更されたら、サブカテゴリドロップダウンのデータをリクエストしてデータを入力できます。さまざまな方法で処理できます。以下は、（jqueryを使用して）取得する1つのオプションです。開始しました。

// 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-24T17:49:07.033 に答える
0

AJAXを使用している場合は、コードの2番目のビットをAJAX経由で呼び出す別個のphpファイルにする必要があります。AJAX呼び出しからのコールバックで、（擬似コード）を実行するだけですsomeContainingDivOrSomething.innerHtml = responseBody;。

PHP表示ファイル内で直接クエリを実行することは一般的に悪い考えであることに注意してください（関心の分離）。改善できることが他にもいくつかあります。ただし、これで開始できます。

于 2012-07-24T17:43:19.720 に答える
0

ランディングページでこのhtml構造を作成します

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

カテゴリドロップダウンに割り当てられたjs関数を作成します

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

                                             });

}

今あなたのload_sub_cats.phpに

<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-24T17:57:15.823 に答える