Question

遇到过我需要在我的网站上使用多个选择进行分组的情况。在尝试使用此功能时，IOS存在巨大问题。我做了一些研究，显然这个bug已经存在了很长一段时间。有没有人在此期间找到解决方案？我正在尝试任何东西...修复，变通方法，完全不同的方法提供多个选择等...我只需要让用户能够从组中选择多个（我唯一的要求）。

我的测试涉及带有7.0.6的iPhone（在撰写本文时最新）。根据我的发现，这也发生在6.0以后？作为html的这种基本和“旧”功能，苹果公司还没有解决这个问题，这是一个疯狂的边缘线。

html：

以这种方式使用移动野生动物园会崩溃。

<select class="form-control" multiple="multiple" name="settings[users]">
    <optgroup label="Computer 1">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </optgroup>
    <optgroup label="Computer 2">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </optgroup>
</select>

使用这种方式它不会崩溃，但是，所选项目的问题是显而易见的。如果我选择前5个选项，那么一旦我点击“完成”，它就会变为4.如果我没有选择任何内容，则选择第一个禁用的选项“计算机1”，这是不可能的。我认为这是由于下面列出的js修复。

<select class="form-control" multiple="multiple" name="settings[users]">
    <option disabled="disabled">Computer 1</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option disabled="disabled">Computer 2</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

我发现可能的JS修复：

此修补程序似乎无法处理optgroups（我必须拥有它，因为不同的计算机可能具有相同的选项，但完全不同），但即使这样也无法解决问题。

if(navigator.userAgent.match(/iPhone/i)) {
    $('select[multiple]').each(function(){
        var select = $(this).on({
            "focusout": function(){
                var values = select.val() || [];
                setTimeout(function(){
                    select.val(values.length ? values : ['']).change();
                }, 1000);
            }
        });
        var firstOption = '<option value="" disabled="disabled"';
        firstOption += (select.val() || []).length > 0 ? '' : ' selected="selected"';
        firstOption += '>&laquo; Select ' + (select.attr('title') || 'Options') + ' &raquo;';
        firstOption += '</option>';
        select.prepend(firstOption);
    });
}

使用optgroup进行多项选择IOS修复？

0 个答案: