Jquery 使用选择列表动态加载div中的内容_Jquery_Html_Ajax

Jquery 使用选择列表动态加载div中的内容

jquery html ajax

Jquery 使用选择列表动态加载div中的内容,jquery,html,ajax,Jquery,Html,Ajax,我正在尝试使用下拉选择菜单加载div部分的内容。当用户选择任何类别时，应显示该类别的内容。（我不想为每个类别创建不同的页面，只需根据所选类别更新内容）按用户选择类别时，必须显示该类别的流行品牌。例如，如果用户选择车辆，则div部分应显示汽车、自行车等的品牌我尝试过搜索，但在每一个教程中，都会在div标记中动态加载一个新页面，我只想显示一些静态内容，而不为每个类别创建单独的页面。应该在script标记中编写什么代码来实现这一点 <html> <head> &l

我正在尝试使用下拉选择菜单加载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>


浏览类别：
数码产品
车辆
家居及家具
动物
书籍与体育
服饰美容
房地产
所有类别


$（'#category'）。关于（'change'，函数（事件）{
var val=$（this.val（）；
$.ajax({
url:'test.php'，
键入：“POST”，
数据：{cat:val}，
})
.完成（功能（数据）{
$（'#ContentArea'）.html（数据）
})
.fail（函数（）{
控制台日志（“错误”）；
})
.always（函数（）{
控制台日志（“完成”）；
});
});
浏览类别：
数码产品
车辆
家居及家具
动物
书籍与体育
服饰美容
房地产
所有类别

更新：服务器端结果取决于您的工作。例如，我得到了类别名称，并指出：

<?php

if (isset($_POST['category'])) {
    echo $_POST['category'];
}

?>

等待有人来为您做这件事？我们无法回答您的问题，因为我们需要其他信息。你的目录结构是什么？我们到底在加载什么，完整的HTML页面，HTML片段，JSON…？你想在div中加载什么样的内容？如果没有人回答你的问题，我建议你。这是你问题的答案，检查一下，我想显示的内容必须存储在哪里？@user3477805你必须在服务器端的test.php中加载内容

<?php

if (isset($_POST['category'])) {
    echo $_POST['category'];
}

?>