Javascript 选择一个较长的HTML，以获得更好的可用性

在HTML select中，我有10个optgroup，每个optgroup有30个项目，所以select中有300s选项……这是一个巨大的列表

是否可以使用一些CSS或JS库，使每个optgroup下的选项仅在选择当前optgroup时显示

---

类似于2级JS菜单，但我使用HTML选择作为源代码。可能吗？

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

诀窍是知道什么时候一个值是第一级的，什么时候它们只是重新填充select。那么onchange事件应该执行如下操作：

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

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);
        }
    });
}

在ajax调用后端填充时，选项可以是：

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

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);
        }
    });
}

功能填充选项（selectId，optVal）{
$.ajax({
类型：“POST”，
网址：'http://example.com/ajax_refill',
数据：{'category'：optVal}，
数据类型：'json'，
成功：功能（数据）{
变量select=$（selectId），选项=''；
select.empty（）；
对于（var i=0；我为什么不使用两个不同的
select
，其中第二个基于第一个加载其项目？或者一个select元素是您唯一的选项？可以从optgroup和options创建一个两级菜单并隐藏select。当从菜单中选择的项目更新select值时。很可能已经有一个插件可以使用我不知道“我不认为问题中有任何东西表明需要、希望或甚至可能与服务交互（这可能是一个独立的应用程序）。是的，您是对的，然后为检索新选项的通用函数更改$.ajax（）调用，我将尝试这样做。