0

我的数据库中有大约 350 种产品，我目前担心我的后端。在后端，如果我想选择一个产品，我使用的是原生下拉菜单，但是看到下拉菜单的滚动条（这么小）非常令人生畏，需要花费大量时间进行搜索

我想要一个下拉菜单的替代品，通过它我可以非常快速地选择一个产品

2个注意事项：

  1. 我没有太多空间展示产品
  2. 我的产品已分类

我知道这个问题非常广泛，但我已经尽可能缩小了范围。

4

5 回答 5

4

由于您已经对这些选项进行了分类，也许您可​​以使用一个下拉菜单来选择类别，并通过其选择显示第二个选项。

既然你说它是为了后端，我假设你知道你从那个下拉列表中选择了什么产品。在这种情况下，另一个选项可能是使用jQuery UI Autocomplete。您可以将它与 AJAX 或静态 Javascript 数组一起使用。

有一些东西可以让你开始。如有必要，我可以提供一些示例。

于 2012-09-15T11:36:09.907 回答
1

如果您的客户不知道产品，则不应使其自动完成。

您可以使用级联下拉菜单。选择过滤产品的类别。

在更改类别时，您重新过滤产品：

$categories.on("change", function(){
    getProducts();
});​

function getProducts() {
    $products.empty();

    var category = $categories.val();

    products.forEach(function(product) {
        if (product.category === category) {
            $products.append("<option>" + product.value + "</option>");
        };
    });
}

getProducts()如果您不想一次拉下所有产品，也可以是 ajax 调用。以上只是一个例子。

演示- 按类别过滤产品 - 已编辑以包含行项目示例

但是，一个完全不同的选项可能是根据您的类别选择呈现产品的图形列表。

例如，类似于：

function renderProductDetail(productName){
    var lineItem = "<br /><div><img src='http://www.placehold.it/140x100' /><span>" + productName + ": Details can go here....</span><button type'button'>Select</button></div>";
    $productDetails.append(lineItem);
}

这样，客户就可以为每个产品提供一张图片和一份描述。每个项目旁边都有一个小选择按钮/链接，依此类推。

这就是大多数销售产品、komplett、dabs、亚马逊等网站的方式......

于 2012-09-15T12:03:29.597 回答
0

您必须使用包含产品类别的下拉菜单，并且在名称前面有一个 + 号，当单击该产品时，会显示该产品，并且名称前面有一个复选框，然后从中选择..

于 2012-09-15T11:35:01.273 回答
0

您需要将产品划分为子类别，然后放置两个下拉列表

一个用于主要类别，
另一个用于各自的子类别，

并且您必须维护第二个下拉列表，就好像选择了一个主要类别一样，那么其相关的只有第二个下拉列表中的选项

好像我们使用自动完成它永远不会对用户友好，用户可能不知道产品

于 2012-09-15T11:37:22.083 回答
0

鉴于您已经有产品类别，您最整洁的选择可能是使用菜单样式的弹出菜单：

http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

于 2012-09-15T11:38:00.620 回答