ですから、私は現在、州ごとに整理された店舗のリストを扱っています。それらをすべてページにリストするのではなく、明らかに状態を選択し、その状態のストアが送信ボタンを押さずに非同期で表示される選択ボックスを使用したかったのです...その背後にある理論を知っているような気がします、作業に適した例/チュートリアルを探しています
助けてくれてありがとう
skv
ですから、私は現在、州ごとに整理された店舗のリストを扱っています。それらをすべてページにリストするのではなく、明らかに状態を選択し、その状態のストアが送信ボタンを押さずに非同期で表示される選択ボックスを使用したかったのです...その背後にある理論を知っているような気がします、作業に適した例/チュートリアルを探しています
助けてくれてありがとう
skv
私はあなたの州の選択ボックスとあなたの店のための選択コンテナを作成します。
<select id="state">
<option value="">Select State</option>
<option value="AL">Alabama</option>
...
</select>
<select id="stores"></select>
次に、jqueryで変更イベントを設定して、変更する状態選択ボックスをリッスンします
$('#state').change(function(){
if($(this).val()==''){
$('#stores').html('<option value=""></option>');
return;
}
$.ajax({
type:"POST",
url:"PATH_TO_PHP",
data:"state="+$(this).val(),
success:function(x){
$('#stores').html(x);
}
});
});
次に、PHP側で状態を取得し、ストアを見つけてオプションを返します
$state = $_POST['state'];
// $stores = SQL QUERY TO GET STORES
echo '<option value="">Choose a Store</option>';
foreach($stores as $s){
echo '<option value="'.$s.'">'.$s.'</option>';
}
ajax phpドロップダウンチュートリアルを検索してみてください。簡単なガイダンスとして、選択した状態でサーバーにajaxリクエストを実行し、次のドロップダウンにストア名を入力します。サンプルを貼り付けますここにコードを記述しますが、それでも必要に応じて変更する必要があります。
HTML構造
<select name="state" id="state">
<option value="State1"> State 1 </option>
<option value="State2"> State 2 </option>
<option value="State3"> State 3 </option>
</select>
<div id="store_dropdown">
</div>
JqueryAjaxリクエスト
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function getStores(){
data = 'state=' + $('#state').val();
$.post('getStores.php',data,function(response){
$('#store_dropdown').val(response);
})
}
$('#state').keyup(getStores);
$('#state').keydown(getStores);
$('#state').mouseup(getStores);
$('#state').mousedown(getStores);
})
</script>
PHPコード
$state = $_POST['state'];
// here goes your sql query to the database
// run a while loop with the fetched data
$output = '<select name="store_name">';
while($row = mysql_fetch_array($sql))
{
$output .= '<option value="'.$row['store_name'].'">'.$row['state_name'].'</option>';
}
$output .= '</select>';
echo $output;