Question

问题在标题中有详细描述。当我对select标签中的所有选项标签使用.hide（）时，隐藏最后一个元素后，它会崩溃。

另外，来自小提琴的代码：

<select size="4">
<option>Test 1</option>
<option>Test 2</option>
</select>

$(function(){
    $('button').on('click',function(){
        $('select option:selected').hide();
    })
})

Answer 1

为您的选择提供min-width/width，我认为您不能隐藏它们，而是删除它们。如果你想保留后面使用的选项，你可以在删除之前存储一些缓存，比如jquery的数据缓存。

JS：

$(function(){
    var $select = $('select');
    $select.data('myOptions', $select.find('option')); //save it here in case needed later

    $('button').on('click',function(){
        $select.find(':selected').remove();
    });
    //sample mathod to show populating them back
    $('#getBack').on('click', function(){
        $select.html($select.data('myOptions'));
    });

});

CSS：

select{
    min-width:60px;
    /*play around with fixed width/max-width to make sure your select is in proper shape.*/
}

<强> Fiddle

隐藏所有选项后选择标记折叠

1 个答案: