正文

饿了么订单查询：用jQuery实现店铺列表与商品列表实时联动

/0 浏览量
0611

在饿了么这样的在线订餐平台上，用户通常需要先选择店铺，然后才能浏览和选择商品。为了提升用户体验，实现店铺列表与商品列表的实时联动是一个很好的功能。下面，我将详细介绍如何使用jQuery来实现这一功能。

1. 前端页面布局

首先，我们需要一个基本的HTML结构来展示店铺列表和商品列表。以下是一个简单的示例：

<div id="store-list">
    <select id="store-selector">
        <option value="">请选择店铺</option>
        <!-- 店铺选项将通过jQuery动态填充 -->
    </select>
</div>

<div id="product-list">
    <h2>商品列表</h2>
    <ul>
        <!-- 商品列表将通过jQuery动态填充 -->
    </ul>
</div>

2. CSS样式

为了使页面更加美观，我们可以添加一些基本的CSS样式：

#store-list, #product-list {
    margin-bottom: 20px;
}

#product-list ul {
    list-style-type: none;
    padding: 0;
}

3. jQuery脚本

接下来，我们使用jQuery来动态填充店铺和商品列表，并实现联动效果。

$(document).ready(function() {
    // 假设这是从服务器获取的店铺数据
    var stores = [
        { id: 1, name: '店铺A' },
        { id: 2, name: '店铺B' },
        // ... 更多店铺
    ];

    // 填充店铺列表
    $('#store-selector').html(stores.map(function(store) {
        return '<option value="' + store.id + '">' + store.name + '</option>';
    }));

    // 监听店铺选择器的变化
    $('#store-selector').change(function() {
        var storeId = $(this).val();
        if (storeId) {
            // 假设这是从服务器获取的商品数据
            var products = [
                { id: 1, name: '商品1', storeId: 1 },
                { id: 2, name: '商品2', storeId: 1 },
                { id: 3, name: '商品3', storeId: 2 },
                // ... 更多商品
            ];

            // 过滤出当前店铺的商品
            var filteredProducts = products.filter(function(product) {
                return product.storeId === parseInt(storeId);
            });

            // 清空商品列表，并填充新的商品数据
            $('#product-list ul').empty().html(filteredProducts.map(function(product) {
                return '<li>' + product.name + '</li>';
            }));
        } else {
            // 清空商品列表
            $('#product-list ul').empty();
        }
    });
});

4. 总结

通过以上步骤，我们成功实现了饿了么订单查询中店铺列表与商品列表的实时联动。当用户选择不同的店铺时，商品列表会自动更新，展示该店铺的商品信息。这种联动效果可以大大提升用户体验，让用户更快地找到自己需要的商品。

-- 展开阅读全文 --