一次有多个数据要显示时，使用下拉菜单分组，进行多级显示

在H5页面中用js实现选择器中数据过多时，进行分组选择
项目中有个进行区服选择需求，因为有些区服数组过长，一个选择器进行选择需要滑动时间太久。
所以对数据先做分组处理，然后把选择项进行分组显示
下面是相关代码`//填充区服

function FillAreaService(data) {
    console.log("fill the list");    
    var str = '';
    var multipleSelect = document.getElementById("multipleSelect");
    var singleSelect = document.getElementById("singleSelect");

    if(data.length > 100) {
        multipleSelect.className = "multipleSelect";
        singleSelect.className = "none";
        
        var group = Math.ceil(data.length / 100);
        _splitedData = this.Packet(data);
//        console.log("##### splited data", _splitedData);
        for(var i = 0; i < group; i++) {
            $("#groupId").append('<option id="groupOption" value="' + i + '">' + (i * 100 + 1) + "--" + (i + 1) * 100 + '</option>');
        }
    } else {
        $.each(data, function(i, v) {
            str += '<option value="' + v['server_id'] + '">' + v['server_name'] + "（" + v['server_id'] + "）" + '</option>';
        });
        $('#serverId').append(str);
    }
}

//填充区服的单个条目
 

function FillAreaItem(groupIndex) {
//    console.log("@@@@@ fill the area server item", groupIndex);
    $('.groupItemSelect').empty().append('<option value="">--请选择--</option>');
    var _data = _splitedData[groupIndex];
    var str = '';
    $.each(_data, function(i, v) {
        str += '<option value="' + v['server_id'] + '">' + v['server_name'] + "（" + v['server_id'] + "）" + '</option>';
    });
    
    $('.groupItemSelect').append(str);
//    console.log("####### server id", $("#serverId"));
}

//数据分组

function Packet(_data) {
    var allDataArray = new Array();
    var group = Math.ceil(_data.length / 100);
    for(var i = 0; i < group; i++) {
        var tempArray = new Array();
        for(var j = i * 100; j < (i + 1) * 100 && j < _data.length; j++) {
            tempArray.push(_data[j])
        }
        allDataArray.push(tempArray);
    }

    return allDataArray;
}

因为当数数据少的时候就不分组，html页面部分代码如下

```
<p class="singleSelect" id="singleSelect">
                        <span class="rechargeL">区服<span style="color: red">*</span>：</span>
                        <select name="serverId" class="" id="serverId">
                            <option value="">--请选择--</option>
                        </select>
                    </p>
                    <p class="multipleSelect none" id="multipleSelect">
                        <span class="rechargeL">区服<span style="color:red">*</span>：</span>
                        <select name="serverId" class="groupSelect" id="groupId">
                            <option value="">--请选择--</option>
                        </select>
                        <select name="serverId" class="groupItemSelect" id="serverId">
                            <option value="">--请选择--</option>
                        </select>
                    </p>
```

获的当前选项的数据代码如下。

    serverId = $('select:visible[id="serverId"]').val();
    serverName = $('select:visible[id="serverId"] option:selected').html();

记录一下平时遇到的问题
也算是抛砖引玉，希望能得到大佬的点播