更新：

Question

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

我尝试过搜索但是在每个教程中都有动态加载div标签内的新页面，我只是想显示一些静态内容而不为每个类别创建单独的页面。应该在脚本标签内写什么代码来做是什么？

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

?>

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

1 个答案:

更新：