Ошибка Chrome при выпадающем списке элементов, когда скрывается множество опций

Ответ 1

Добавление этого можно считать обходным путем:

 $(document).ready(function () {

    $('#ph2').mouseenter(function () {

      var html = '';

        $(this).find('option').each(function () {

            if ($(this).css('display') !== 'none') {

                html = html + '<option>' + $(this).text() + '</option>';   
            }
        });

        $(this).html(html);
    })
});

Здесь jsFiddle; Я использую jquery просто для простоты. В этом случае я просто переделываю HTML на mouseenter. Это не идеально, но это может заставить вас идти дальше. Также обратите внимание, что ph2 настроен как div в вашем HTML; Я думаю, вы должны установить его как элемент выбора с самого начала, и на скрипке вы увидите изменение, которое я сделал для html. Но в целом, пока ошибка не будет исправлена, я думаю, что что-то вроде этого будет так же близко, как и у вас есть рабочий вариант.

Ответ 2

У меня была эта проблема, и вот что я сделал:

var originalSelect = $("#the_select").clone();

function hideSomeOptions(){
  $('#the_select .hide_me').remove();
}

function restoreAllOptions(){
  $("#the_select").replaceWith(originalSelect[0]);
}

Вход для выбора цели имеет идентификатор "the_select", а опции или группы optgroups, которые нужно переключить, имеют класс "hide_me".

Ответ 3

Я обнаружил, что порядок скрытых/видимых параметров имеет значение. Это похоже на хромовые остановки, подсчитывающие высоту для раскрывающегося списка по первой скрытой опции. Один из способов - переместить показанные опции в начало выбора. Если вы используете jquery примерно так.

var select = "select#MySelect";
$(select).children("option").hide();  //hide all options
$(select).children("Selector for items to show").each(function(idx, elm) {
           $(elm).parent().prepend(elm);  //move item to the top of parent
});
$(select).children("Selector for items to show").show(); //show selected options

Ответ 4

В качестве обходного пути для этой ошибки я могу предложить следующее решение:

• Чтобы скрыть параметр "конвертировать" его в какой-либо другой тег и скрыть его с помощью .hide().
• Чтобы показать вариант "конвертировать" его обратно в option и показать его с помощью .show().

Для "преобразования" нам нужно что-то вроде этого: fooobar.com/questions/111486/....

Пример:

// some `replaceTagName` implementation here

// hiding options
$('.option-selector').replaceTagName('span').hide();

// showing options
$('.option-selector').replaceTagName('option').show();

Немного тяжело, но работает:)

Ответ 5

Я столкнулся с той же проблемой (Chrome 40) и обнаружил, что для меня хорошо работает следующий обходной путь.

var originalOptions = [];

$(document).ready(function(){
    originalOptions = $("yourSelect").children("option");

    $("someElement").someEvent(function(){
        $("yourSelect").children("option").remove();
        $(originalOptions).each(function(){
            if(/*criteria here*/){$("yourSelect").append($(this));}
        });
    });
});

Ответ 6

Лучшее решение - добавить в конце последнего

<option></option> в выбранном элементе. Добавьте этот код:

<optgroup></optgroup>

Это добавит пустой элемент группы, и на данный момент это лучший простой и быстрый FIX для этого редкого BUG.

Спасибо!