好的,所以假设您有一个下拉菜单并希望使用 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>
后端 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。你可以为每个like使用一个id,id='category_1'
这样你的JS看起来像这样:
<script type="text/javascript">
$(document).ready(function(){
$('#category').change(function(){
var id = $(this).attr('id');
$('#display_area').html($('#category_' + id).clone());
});
});
</script>