わかりました。ドロップダウンがあり、jquery を使用して新しいコンテンツをその値に基づいて表示領域に取得したい場合は、次のようにします。
HTML (または PHP) フロントエンド
<select id='category'>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
</select>
<div id='display_area'></div>
option
パラメータとしてそれぞれがvalue
適切に設定されていることに注意してください
JavaScript/jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#category').change(function(){
//Retrieve Content from the back-end PHP page, and pass the ID selected
var url = 'fetch_category.php?id=' + $(this).val();
$('#display_area').load(url);
});
});
</script>
- 関数はバックエンドの PHP ページを呼び出し、選択した ID を渡します。
バックエンド fetch_category.php
<?php
//Resolve the ID passed by the Javascript Function
$id = $_REQUEST['id'];
//Generate Content Specific to the ID contained in $id
?>
- この PHP ファイルで生成されたものはすべて、指定された表示領域に入力されます
代替方法
(必要に応じて) ajax を使用するのではなく、最初のページ生成で PHP を使用して、各カテゴリ コンテンツの div を作成することができます。id='category_1'
JS が次のようになるように、各 like に id を使用できます。
<script type="text/javascript">
$(document).ready(function(){
$('#category').change(function(){
var id = $(this).attr('id');
$('#display_area').html($('#category_' + id).clone());
});
});
</script>