Подсчет видимых раскрывающихся опций в Opera и Chrome, скрыть опцию выбора в IE

У меня есть выпадающий список и кнопка. Когда я нажимаю на кнопку, я хочу скрыть выбранную опцию, а когда больше нет доступных опций - скрыть выбранную опцию. Довольно просто НО ... Этот код (см. Ниже и на jsfiddle) не выполняет • Работает с Opera и Chrome, но отлично работает в Mozilla. Под словом «не работает» я имею в виду, что длина видимой опции всегда равна 0. Итак, как я могу подсчитать видимые опции выбора в этих браузерах? Несколько слов об IE: selectedOption.hide(); и другие методы скрытия, такие как selectedOption.display('none'); и selectedOption.style('display', 'none');, на самом деле не скрывают эту опцию ... Как мне это сделать в IE?

<input type="button" value="Ckick" id="hide-option-button" />

<select id="my-select">
    <option value=""></option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>    
</select>


$(document).ready(function(){

var button = $('#hide-option-button');
var dropDown = $('#my-select');

button.click(function(){
    var selectedOption = dropDown.find('option:selected');

    // Do nothing if empty option selected
    if (selectedOption.val() == '') return;

    // Remove selected option from drop down (just hide it to be able display it again after)
    selectedOption.hide();

    // Select first empty item to prevent glitch with displaying just selected and hided option in drop down
    dropDown.val('');

    if(shouldHideDropDown(dropDown))
    {
        dropDown.hide();
    }
});

function shouldHideDropDown(dropDown) {
    var visibleOptions = dropDown.children(':visible');
    console.log(visibleOptions.length);
    console.log(visibleOptions.size());
    return visibleOptions.length === 1;
}

});

P.S. Я использую Opera 17.0.1241.53, Chrome 30.0.1599.101 m, Mozilla Firefox 24.0, IE 10.0.920016721. в Windows 7 x64.


person Dmytro    schedule 05.11.2013    source источник


Ответы (2)


У меня были плохие времена, когда я пытался применить стиль css к элементам опций html (пытаясь сделать то же самое, что и вы).

Я пробовал использовать display:none, opacity:0 и даже заменил его значение на пустое.

После того, как вы скрыли параметр, сфокусируйте поле выбора и начните использовать клавиатуру. Вы увидите, что даже если опция скрыта, опция будет отображаться!.

Мне пришлось изменить весь свой код, чтобы это заработало. Я решаю эту проблему, НЕ пытаясь стилизовать элементы параметров html и начав использовать другой подход (массивы javascript aux).

person Felipe Miosso    schedule 05.11.2013

Это ошибка в хроме. Надеюсь, они скоро разрешатся.

person Yasir Aslam    schedule 24.01.2014