たとえば、450個のアイテムを含むデータベースがあります。各アイテムには、モデル番号とメーカーIDがあります。
検索ページで、Make＆Modelで検索するオプションがありますが、リストはちょっと面倒です。
現在、メーカーを選択して[送信]をクリックすると、同じメーカーのモデルのリストが表示された別のドロップダウンが表示されます。
makeを選択すると、javascript、ajax、jquery、またはこれを可能にする実際のすべてのものを使用して、モデルのドロップダウン選択に自動的に入力されるようにしたいと思います。
言語がよくわからないので、ここで行くことはあまりありません。私が抱えている本当の問題は、最初のドロップダウンから選択されたものに基づいてデータベースから配列を動的に入力し、それを使用して2番目のドロップダウンにデータを入力する方法がわからないことです。
任意のアドバイス/実用的な解決策をいただければ幸いです。
注：現在、前に述べたように、makeを選択し、submitを押してから、モデルを選択する必要があります。これは、$ _ GETを使用してあまり使用されないと思いますが、これに対する私の現在のコードです。
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Model Search</h3>
</div>
<div class="panel-body">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#type" aria-controls="type" role="tab" data-toggle="tab">Make</a></li>
<li role="presentation"><a href="#model" aria-controls="model" role="tab" data-toggle="tab">Model</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="type">
<br>
<form method="GET">
<div class="input-group">
<?php
$check = mysqli_query($con, "SELECT DISTINCT Make FROM Products ORDER BY Make ASC");
echo '<select name="MAKE" style="width:100%;height:33px;">';
if(strcmp($_GET['MAKE'], '') != 0)
echo '<option value="' . $_GET['MAKE'] . '">' . $_GET['MAKE'] . '</option>';
while($row = mysqli_fetch_array($check)) {
echo '<option value="' . $row["Make"] . '">' . $row["Make"] . '</option>';
}
echo '</select>';
?>
<span class="input-group-btn">
<button class="btn btn-default" onclick="window.location.href='#model'" type="submit">Find Models</button>
</span>
</div><!-- /input-group -->
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="model">
<br>
<form method="GET">
<div class="input-group">
<?php
$Make = $_GET['MAKE'];
$check = mysqli_query($con, "SELECT * FROM Products WHERE `Make`='$Make' ORDER BY Model ASC");
echo '<input type="hidden" name="MAKE" value="' . $Make . '">';
echo '<select name="UPC" style="width:100%;height:33px;">';
while($row = mysqli_fetch_array($check)) {
echo '<option value="' . $row["UPC"] . '">' . $row["Model"] . '</option>';
}
echo '</select>';
?>
<span class="input-group-btn">
<button class="btn btn-default" onclick="window.location.href='#model'" type="submit">Search!</button>
</span>
</div><!-- /input-group -->
</form>
</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
おそらくこれを行うための最良の方法は、オプションリストを生成するPHPコードを独自の別のファイルに配置することget_options.phpです。オプションのリストを次の形式で返すようにします
<option value="someValue">someValueName</option>
<option value="someOtherValue">someOtherValueName</option>
<option value="anotherValue">anotherValueName</option>
以前使用していたスクリプトを使用します。
次に、最初のページで、get_options.phpたとえば次のようにAJAXリクエストを実行します。
function getOptions() {
make=document.getElementById("make"); //replace with where you actually get the make from
var xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange=function(){
if (xmlRequest.readyState==4 && xmlRequest.status==200) {
document.getElementById("someSelector").innerHTML = xmlRequest.responseText;
//someSelector is the ID of your <select> tag.
}
}
xmlRequest.open("GET","get_options.php?MAKE="+make,true);
xmlRequest.send();
}
このスクリプトは、入力（おそらくテキスト入力を想定しています）から車のメーカーを取得し、に送信しget_options.php、<option>sのリストを受信して、セレクター（id="someSelector"）に上記のオプションを入力します。isはPHPではなくAJAXリクエストであるため、ドキュメントが読み込まれた後はいつでも実行でき、同じ機能を実行します。onchangeたとえば、メイクセレクターの場合に使用することをお勧めします
<input type="text" id="make" onchange="getOptions();">
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加