0

編集:この最初のエントリの下部にあるソリューション。

私はSOを1日か2日精査してきましたが、動的ドロップダウンを機能させることに運がありません。

フォームがあります。最初のドロップダウンは顧客フィールドです。私が望むのは、顧客がドロップダウンで選択されたときに、その顧客に関連付けられた用語が 2 番目のドロップダウンで選択されることです。2 番目のドロップダウンには、どの顧客が選択されても常に同じオプションがあり、その特定の顧客に対してどのオプションが「選択」されるかが問題になります。

これがその外観です。

Dropdown1 (customer)
---------
Acme Corp
Contoso Inc
Smithville

Dropdown2 (terms)
---------
NET15
NET30
NET45

dropdown2 を、mysql データベース内のその顧客に関連付けられた用語に変更したいと考えています。

ドロップダウン オプションをフォーム自体に残し、javascript を使用して php ファイルを呼び出して、その顧客に対して選択されているオプションを確認する必要があるかどうか、またはフォームからオプションの選択全体を単純に削除する必要があるかどうかを判断できません。以下の私の作品に示すように、javascript呼び出しを行います。

これが私の 2 つのドロップダウンのフォームです。2 つ目は、div を使用した JavaScript からのものです。

<td><select name="company" onchange="getTerms('terms');">
<option value="" selected></option>
<?php while($row = mysql_fetch_array($result)) {
  echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>

<td><div id="terms"></div></td>

そして、これがjavascriptから呼び出されることになっている私のphpファイルです。これが行うことは、顧客のオプションを取得し、選択されたオプションを選択することです。?id=acme corp を使用してブラウザでこれを直接実行すると、正常に動作するので、php が動作していることがわかります。

<?php
include $_SERVER['DOCUMENT_ROOT']."/connect.php";


$result3 = mysql_query("SELECT * from netterms ORDER BY days ASC") or die(mysql_error());

$result = mysql_query("SELECT terms FROM customer WHERE company = '$_GET[id]'") or die(mysql_error());
$row = mysql_fetch_array($result);

echo "<option value=\"\" selected></option>";
while($row3 = mysql_fetch_array($result3)) {
  echo "<option value=\"".$row3['days']."\""; echo($row['terms'] == $row3['days']?' selected="selected"':null)?>><?php echo $row3['name']."</option>";

}
?>

最後に、javascript/jquery での私の試みを次に示します。

<script type="text/javascript">
 function getTerms(div){
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "<select name='terms'>" + xmlhttp.responseText + "</select>";
     }
      document.getElementById(div).appendChild(newdiv);
   }

 xmlhttp.open("GET", "customertermsdropdownquery.php?id=", false);
 xmlhttp.send();
 }
 </script>

私が見ているのは、dropdown1 が変更されるたびに、新しい (追加の) dropdown2 が画面に表示されることです。ページ全体に複数のドロップダウンを表示するのではなく、ドロップダウンのオプションを更新するだけです。また、xmlhttp.open から ?id= を php ファイルに渡す方法がわかりません。ありがとう。

解決済み:

これを機能させるために数日間試みた後、別のサイトで解決策を見つけました。これがコードです。ここで重要なのは、テーブル タグで div タグを慎重に使用することです。この著者のコードでは以下に示されていませんが、このようになります。

私にとって、td タグは php ではなく、ここにある必要がありました。ただし、私の選択タグはphpにあります。これが検索している誰かにとって価値があることを本当に願っています。

<html>
<head>
<script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>
4

1 に答える 1

0

最初の選択が変更されるたびに、Ajax を使用して php スクリプトをロードする必要があります。

選択ボックスが変更されるたびに ajax で http リクエストを送信することから適応:

私はあなたの質問に答えを適応させようとしましたが、実際にテストすることはできません:

$("#company").live('change',function() 
{
    var selectVal = $('#company :selected').val();


    var $terms = $('#terms').html('');

    $.ajax({                                      
      url: 'customertermsdropdownquery.php',                         
      data: "id="+selectVal,                                                     
      dataType: 'GET',                
      success: function(data)         
      {

              $terms.append(data);

      } 
    });

});
于 2013-04-12T20:14:56.283 に答える