我正在尝试使用下拉选择菜单加载 div 部分中的内容。当用户选择任何类别时，应显示该类别的内容。 (我不想为每个类别制作不同的页面，只需根据所选类别更新内容) 用户选择类别时，必须显示该类别的热门品牌。例如，如果用户选择“车辆”，则 div 部分应显示汽车、自行车等品牌。
我尝试搜索，但在每个教程中都给出了动态加载 div 标签内的新页面，我只想显示一些静态内容，而不为每个类别创建单独的页面。应该在 script 标签内编写哪些代码来执行此操作那？
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
Browse Category:
<select id="category" onChange="displayCategory()">
<option value="MobilesAndTablets"></option>
<option value="Electronics">Electronics</option>
<option value="Vehicles">Vehicles</option>
<option value="HomeAndFurnitures">Home and Furnitures</option>
<option value="Animals">Animals</option>
<option value="BooksAndSports">Books and Sports</option>
<option value="FashionAndBeauty">Fashion and Beauty</option>
<option value="RealEstate">Real Estate</option>
<option value="AllCategories">All Categories</option>
</select>
<br>
<div id="ContentArea">
</div>
</body>
</html>
最佳答案
<html>
<head>
<script type="text/javascript">
$('#category').on('change', function(event) {
var val = $(this).val();
$.ajax({
url: 'test.php',
type: 'POST',
data: {cat: val},
})
.done(function(data) {
$('#ContentArea').html(data)
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
});
</script>
</head>
<body>
Browse Category:
<select id="category" name='category'>
<option value="MobilesAndTablets"></option>
<option value="Electronics">Electronics</option>
<option value="Vehicles">Vehicles</option>
<option value="HomeAndFurnitures">Home and Furnitures</option>
<option value="Animals">Animals</option>
<option value="BooksAndSports">Books and Sports</option>
<option value="FashionAndBeauty">Fashion and Beauty</option>
<option value="RealEstate">Real Estate</option>
<option value="AllCategories">All Categories</option>
</select>
<br>
<div id="ContentArea">
</div>
</body>
</html>
更新:
服务器端结果取决于您的工作。例如，我获取类别名称并回显:
<?php
if (isset($_POST['category'])) {
echo $_POST['category'];
}
?>
关于jquery - 使用选择列表动态加载 div 中的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28020136/