为了更好的可用性做一个长的HTML选择

在一个HTML选择中，我有10个optgroup，每个optgroup有30个项目，所以在选择中有300个选项......这是一个巨大的列表。为了更好的可用性做一个长的HTML选择

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

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

来源

2014-11-23 Howard

为什么不使用两个不同的'select'，其中第二个加载基于第一个项目的项目？或者一个选择元素是你唯一的选择？ – Dim13i 2014-11-23 14:09:21

可以从optgroups和options中创建2级菜单并隐藏选择。当从菜单中选择一个项目更新选择值时。可能已经有一个插件可以用 – charlietfl 2014-11-23 14:28:20

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

诀窍是知道什么时候值是第一级，什么时候只是重新填充选择。然后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调用和任何其他需要的东西。

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

来源

2014-11-23 14:29:49

做到这一点我认为这个问题中没有任何事情表明与服务器的交互是需要的，或者是期望的，甚至是可能的（这可能是一个独立的应用程序）。 – 2014-11-23 16:07:42

是的，你是对的，然后改变$ .ajax（）调用一个通用函数检索新的选项，我会尽力做到这一点。 – 2014-11-23 16:38:24

为了更好的可用性做一个长的HTML选择

回答

相关问题