Question

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

我想要一个替代品，我可以通过它快速选择产品

2注：

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

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

Answer 1

由于您已对这些选项进行了分类，因此您可以使用一个下拉列表选择类别，然后通过选择显示第二个选项。

既然您说它的后端，我假设您知道从该下拉菜单中选择哪种产品。在这种情况下，备用选项可能正在使用jQuery UI Autocomplete。您可以将它与AJAX或静态Javascript数组一起使用。

有些东西可以帮助你入门。如有必要，我可以提供一些例子。

Answer 2

如果您的客户不了解产品，则不应自动完成。

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

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

$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调用。以上只是一个例子。

DEMO - 按类别过滤产品 - 已修改为包含订单项样本

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

例如，类似于：

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，amazon等的方式......

Answer 3

您必须使用包含产品类别的下拉列表，并且在名称前面有一个+号，当点击显示产品时，名称前面有复选框，然后从中选择.. < / p>

Answer 4

您需要将产品分成子类别，然后再输入两个下拉列表

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

并且你必须保持第二个下拉列表，好像选择了一个主要类别，然后它的相关性将只是第二个下拉列表中的选项

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

Answer 5

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

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

很长的下拉列表有哪些替代方案？

5 个答案:

DEMO - 按类别过滤产品 - 已修改为包含订单项样本