2

mysqlデータベースとテーブルに基づいて動的ドロップダウンリストを作成したいと思います。私はネットを検索しましたが、最も近いのはhttp://www.plus2net.com/php_tutorial/ajax_drop_down_list.phpでした。

例としてこのコードを実装しました。最初のドロップダウンボックスは正しく機能しますが、「カテゴリ」を選択すると2番目のドロップダウンボックスは入力されません。

コードは次のとおりです。

main.php

<html>
<body>

<script type="text/javascript">

  function AjaxFunction(cat_id) {
    var httpxml;
    try {
      // Firefox, Opera 8.0+, Safari
      httpxml = new XMLHttpRequest();
    } catch (e) {
      // Internet Explorer
      try {
        httpxml = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          httpxml = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          alert("Your browser does not support AJAX!");
          return false;
        }
      }
    }
    function stateck() {
      if (httpxml.readyState == 4) {
        var myarray = eval(httpxml.responseText);
        // Before adding new we must remove previously loaded elements
        for (j = document.testform.subcat.options.length - 1; j >= 0; j--) {
          document.testform.subcat.remove(j);
        }
        for (i = 0; i < myarray.length; i++) {
          var optn = document.createElement("OPTION");
          optn.text = myarray[i];
          optn.value = myarray[i];
          document.testform.subcat.options.add(optn);
        } 
      }
    }
    var url="dd.php";
    url = url+"?cat_id="+cat_id;
    url = url+"&sid="+Math.random();
    httpxml.onreadystatechange = stateck;
    httpxml.open("GET",url,true);
    httpxml.send(null);
  }

</script>

<form name="testform" method='POST' action='mainck.php'>Name:<input type=text name=fname>
Select first one <select name=cat onchange="AjaxFunction(this.value);">
<option value=''>Select One</option>
<?

  require "config.php";// connection to database 
  $q=mysql_query("select * from categories");
  while($n=mysql_fetch_array($q)){
    echo "<option value=$n[cat_id]>$n[category]</option>";
  }

?>
</select>

<select name=subcat>

</select><input type=submit value=submit>
</form>

</body>
</html>

dd.phpは

<?

  $cat_id=$_GET['cat_id'];
  require "config.php";
  $q=mysql_query("select subcategory from subcategory where cat_id='$cat_id'");
  echo mysql_error();
  $myarray=array();
  $str="";
  while($nt=mysql_fetch_array($q)){
    $str=$str . "\"$nt[subcategory]\"".",";
  }
  $str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string
  echo "new Array($str)";

?>

前述のように、main.phpは最初のドロップダウンボックスを正しくロードして入力します。値を選択すると、2番目のボックスには何も表示されません。テストするために、dd.phpのmysqlクエリをから変更しました

$q=mysql_query("select subcategory from subcategory where cat_id='$cat_id'");

$q=mysql_query("select subcategory from subcategory where cat_id=1");

これにより、「カテゴリ」が選択されたときに2番目のボックスにデータが入力されます。選択した値がmain.phpからdd.phpに正しく渡されていないと思います

$cat_id=$_GET['cat_id'];

これに関する助けをいただければ幸いです。小さい感じがしますが、なかなか指が届きません。

いつものように事前に感謝します。 更新された質問

main.php

<form name='testform' method='POST' action='mainck.php'> 
      Name: <input type='text' name='fname'> 
      Select first one 
      <select name='cat' onchange='AjaxFunction(this);'> 
        <option value=''>Select One</option> 

<?php 

  require "config.php";// connection to database 

  // I will continue to use mysql_query(), but please migrate you code to 
  // PDO or MySQLi ASAP 
  $query = " 
    SELECT cat_id,category 
    FROM categories
  "; 
  $result = mysql_query($query); 

  while ($row = mysql_fetch_assoc($result)) { 
    echo "<option value='{$row['cat_id']}'>{$row['category']}</option>"; 
  } 

?> 

      </select> 
      <select name='subcat' id='subcat_select'> 
      </select> 
      <input type='submit' value='Submit'> 
    </form> 

dd.php

<?php 

  require "config.php"; 

  $query = " 
   SELECT packcode 
    FROM skudata
    WHERE cat_id='".mysql_real_escape_string($_GET['cat_id'])."'       "; 
  $result = mysql_query($query); 

  $array = array(); 
  while ($row = mysql_fetch_assoc($result)) { 
    $array[] = $row['packcode']; 
  } 

  echo json_encode($array); 

?> 

Daveが追加した変更により、新しいmysqlテーブルと参照列を機能させることができません。mysqlをテストしましたが、うまく機能します。どんな助けでも大歓迎です。

ありがとう、

4

2 に答える 2

4

まず、コードが機能しないのを妨げている小さなことは、関数に渡す値です。<select>要素の場合は機能しthis.valueません。代わりに、を使用する必要がありますthis.options[this.selectedIndex].value。そのようです:

<select name=cat onchange="AjaxFunction(this.options[this.selectedIndex].value);">

今あなたのコードについてのいくつかのコメントのために:

  • 絶対に使用しないでくださいeval()。これまで。任意の言語で。正しいユースケースは非常に少ないため、「絶対に使用しない」と言う方がはるかに簡単です。
  • mysql拡張機能は使用しないでください。PDOまたはのMySQLi代わりに使用してください。
  • コードに巨大なSQLインジェクションの穴があります。
  • コードを適切にインデントしてください。デバッグがはるかに簡単になります。あなたが投稿したあのひっそりとしたしこりは、ほとんど読むことができませんでした。
  • document.elementNameページ上の要素にアクセスするために使用しないでください。要素にIDdocument.getElementById('elementId')を付けて、代わりに使用します。これはどこでも機能しますが、名前付き要素は機能しません。
  • PHPの短いオープンタグ<?は使用せず、完全な<?phpタグを使用してください。繰り返しになりますが、どこでも機能しますが、短いタグは機能しません。

これが私があなたのコードを書く方法です:

main.php

<html>

  <head>
    <!-- Omitting the <head> is very bad practice... -->
    <title>My Page</title>

    <script type='text/javascript'>

      function GetAjaxObject () {
        // Wrap the code for fetching an AJAX object in a separate function
        // so it can be easily re-used
        if (window.XMLHttpRequest !== undefined) {
          return new XMLHttpRequest();
        }
        var xhr = null;
        var axo = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'];
        for (var o in axo) {
          try {
            xhr = new ActiveXObject(axo[o]); 
          } catch (e) {}
        }
        if (xhr !== null) {
          return xhr;
        } else {
          throw new Error('Your browser does not support AJAX');
        }
      }

      function ChangeSelect (element) {

        // We are now passing the select element itself in, not just a value

        var xhr, url;

        // Fetch an AJAX object
        try {
          var xhr = GetAjaxObject();
        } catch (e) {
          alert(e.message);
          return;
        }

        // Build the URL
        url = "dd.php"
            + "?cat_id="+element.options[element.selectedIndex].value
            + "&sid="+Math.random();

        // If it still doesn't work, uncomment this line to inspect the url
        // alert(url);

        // Define the readystatechange callback        
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) { // Don't forget to check the status code

              // I shall leave this eval() here for now, but really you should
              // use a safe JSON library like http://www.json.org/js.html
              var myarray = eval(httpxml.responseText);

              // Start by getting a safe reference to the destination select
              var dest = document.getElementById('subcat_select');

              // Before adding new we must remove previously loaded elements
              for (j = dest.options.length - 1; j >= 0; j--) {
                dest.remove(j);
              }

              // Loop data from the server and create new options
              for (i = 0; i < myarray.length; i++) {
                var optn = document.createElement("option");
                optn.text = myarray[i];
                optn.value = myarray[i];
                dest.options.add(optn);
              } 

            } else {
              alert("Server returned error " + xhr.status);
            }
          }
        };

        // Start the request
        httpxml.open("GET", url, true);
        httpxml.send(null);

      }

    </script>

  </head>

  <body>
    <form name='testform' method='POST' action='mainck.php'>
      Name: <input type='text' name='fname'>
      Select first one
      <select name='cat' onchange='AjaxFunction(this);'>
        <option value=''>Select One</option>

<?php

  require "config.php";// connection to database

  // I will continue to use mysql_query(), but please migrate you code to
  // PDO or MySQLi ASAP
  $query = "
    SELECT *
    FROM categories
  ";
  $result = mysql_query($query);

  while ($row = mysql_fetch_assoc($result)) {
    echo "<option value='{$row['cat_id']}'>{$row['category']}</option>";
  }

?>

      </select>
      <select name='subcat' id='subcat_select'>
      </select>
      <input type='submit' value='Submit'>
    </form>
  </body>

</html>

dd.php

<?php

  require "config.php";

  $query = "
    SELECT subcategory
    FROM subcategory
    WHERE cat_id='".mysql_real_escape_string($_GET['cat_id'])."'
  ";
  $result = mysql_query($query);

  $array = array();
  while ($row = mysql_fetch_assoc($result)) {
    $array[] = $row['subcategory'];
  }

  echo json_encode($array);

?>
于 2012-05-28T11:24:47.840 に答える
1

これはすべてmain.phpファイルであるため、このコードは機能しません

<script type="text/javascript">
function AjaxFunction(cat_id)
{
var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
          try
                    {
                 httpxml=new ActiveXObject("Msxml2.XMLHTTP");
                    }
            catch (e)
                    {
                try
            {
            httpxml=new ActiveXObject("Microsoft.XMLHTTP");
             }
                catch (e)
            {
            alert("Your browser does not support AJAX!");
            return false;
            }
            }
  }
function stateck() 
    {
    if(httpxml.readyState==4)
      {

var myarray=eval(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for(j=document.testform.subcat.options.length-1;j>=0;j--)
{
document.testform.subcat.remove(j);
}


for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.testform.subcat.options.add(optn);

} 
      }
    }
    var url="dd.php";
url=url+"?cat_id="+cat_id;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
  }
</script>

<form name="testform" method='POST' action='mainck.php'>
Select first one <select name=cat onchange="AjaxFunction(this.value);">
<option value=''>Select One</option>
<?
require "config.php";// connection to database 
$q=mysql_query("select * from it_category ");
while($n=mysql_fetch_array($q)){
echo "<option value=$n[cat_id]>$n[category]</option>";
}

?>
</select>

<select name=subcat>

</select><input type=submit value=submit>
</form>

</body>
</html>

これはdd.phpです

<?
$cat_id=$_GET['cat_id'];
require "config.php";
$q=mysql_query("select * from it_subcategory where cat_id='$cat_id'");
echo mysql_error();
$myarray=array();
$str="";
while($nt=mysql_fetch_array($q)){
$str=$str . "\"$nt[subcategory]\"".",";
}
$str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string
echo "new Array($str)";

?>
于 2012-10-14T13:22:15.230 に答える