Question

在HTML选择中，我有10个optgroup，每个optgroup有30个项目，因此选择中有300个选项...这是一个巨大的列表。

是否可以使用某些CSS或JS库，因此只有在选择了当前的optgroup时才会显示每个optgroup下的选项？

类似于2级JS菜单，但我使用HTML select作为源。有可能吗？

Answer 1

是的，应该可以用这种方式填充选择框。

诀窍是知道第一级的值何时，以及何时只是重新填充选择。然后onchange事件应该是这样的：

function selChange(sel) {
    var optVal = sel.val();
    if (isFirstLevel(optVal)) {
        fill_options("#select", optVal)
    }
}

如果对后端进行ajax调用，fill_options可能类似于：

function fill_options(selectId, optVal) {
    $.ajax({
        type: "POST",
        url: 'http://example.com/ajax_refill',
        data: {'category': optVal },
        dataType:'json',
        success: function(data) {

           var select = $(selectId), options = '';
           select.empty();      

           for(var i=0;i<data.length; i++)
           {
            options += "<option value='"+data[i].id+"'>"+ data[i].name +"</option>";              
           }

           select.append(options);
        }
    });
}

函数isFirstLevel（）理想地取决于值的结构（语法），因此像正则表达式这样的简单操作可以做，但它可以是任意复杂的，执行ajax调用以及任何其他需要的东西。

但是这样的盒子的用户界面可能会让用户感到困惑，有两个选择框可能会为用户提供更直观的解决方案。

进行长HTML选择以获得更好的可用性

1 个答案: