使用 select 列表动态加载 div 中的内容

Question

我正在尝试使用 select 下拉菜单加载 div 部分中的内容。当用户 select 的任何类别时，应显示该类别的内容。（我不想为每个类别制作不同的页面，只需根据 selected 类别更新内容）在 select 用户访问某个类别时，必须显示该类别的热门品牌。例如，如果用户 selects Vehicles 则 div 部分应显示汽车、自行车等品牌。

我尝试搜索，但在每个教程中都给出了在 div 标签内动态加载新页面的方法，我只想显示一些静态内容而不为每个 category.What 代码创建单独的页面应该写在 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>

Answer 1

<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'];
}

?>

使用 select 列表动态加载 div 中的内容

Dynamically loading content in div using select list

html

ajax

jquery

更新：