javascript - 隐藏所有选项后选择标签折叠

Question

问题在标题中得到了很好的描述。当我对选择标签中的所有选项标签使用 .hide() 时，隐藏最后一个元素后它会崩溃。

小提琴：http: //jsfiddle.net/dXVCn/

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

<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.*/
}

小提琴