0

I have drop down list and button. When I click on button I want to hide selected option and when there is no more available options - hide select itself. Pretty simple BUT... This code (see below and on jsfiddle ) doesn't work with opera and chrome but perfectly works in mozilla. By doesn't work I mean that visible option length is always 0. So how can I count visible select options in those browsers? Few words about IE: selectedOption.hide(); and other hide methods like selectedOption.display('none'); and selectedOption.style('display', 'none'); do not actually hide the option... How do I do that in 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. I use Opera 17.0.1241.53, Chrome 30.0.1599.101 m, Mozilla Firefox 24.0, IE 10.0.920016721 running on Windows 7 x64.

4

2 回答 2

0

尝试在 html 选项元素上应用 css 样式时，我经历了糟糕的时期（尝试做与您正在做的完全相同的事情）。

我尝试使用display:none，opacity:0甚至将其值替换为空。

隐藏选项后，聚焦选择框并开始使用键盘。您会看到，即使选项被隐藏，该选项也会显示出来！.

我必须修改我的所有代码才能使其正常工作。我通过不尝试设置 html 选项元素的样式并开始使用另一个方法（javascript 辅助数组）来解决这个问题。

于 2013-11-05T19:52:17.853 回答
0

这是 chrome 中的错误。我希望他们尽快解决。

于 2014-01-24T06:36:57.630 回答