Question

我意识到Chrome似乎不允许我在<option>隐藏<select>。 Firefox会。

我需要隐藏符合搜索条件的<option>。在Chrome网络工具中，我可以看到我们的JavaScript正确设置为display: none;，但点击<select>菜单后会显示它们。

如何在点击菜单时显示符合我的搜索条件的<option>？谢谢！

Answer 1

您必须实现两种隐藏方法。 display: none适用于FF，但不适用于Chrome或IE。因此，第二种方法是使用<option>将<span>包裹在display: none中。 FF不会这样做（技术上无效的HTML，根据规范）但Chrome和IE将会隐藏该选项。

编辑：哦，是的，我已经在jQuery中实现了这个：

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

编辑2：以下是使用此功能的方法：

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option

编辑3：添加了@ user1521986建议的额外检查

Answer 2

对于HTML5，您可以使用“隐藏”属性。

<option hidden>Hidden option</option>

IE＆lt; 11.但是如果你只需要隐藏一些元素，那么与添加/删除元素或没有语义正确的构造相比，将隐藏属性与disabled结合使用会更好。

<select>  
  <option>Option1</option>
  <option>Option2</option>
  <option hidden>Hidden Option</option>
</select>

Reference

Answer 3

我建议您不使用使用<span>包装器的解决方案，因为它不是有效的HTML，这可能会导致问题。我认为首选的解决方案是实际删除您要隐藏的任何选项，并根据需要还原它们。使用jQuery，您只需要这三个函数：

第一个功能将保存选择的原始内容。为了安全起见，您可能希望在加载页面时调用此函数。

function setOriginalSelect ($select) {
    if ($select.data("originalHTML") == undefined) {
        $select.data("originalHTML", $select.html());
    } // If it's already there, don't re-set it
}

下一个函数调用上面的函数来确保原始内容已经保存，然后只是从DOM中删除选项。

function removeOptions ($select, $options) {
    setOriginalSelect($select);
    $options.remove();
 }

最后一个功能可以在任何时候使用＆＃34;重置＆＃34;回到所有原始选项。

function restoreOptions ($select) {
    var ogHTML = $select.data("originalHTML");
    if (ogHTML != undefined) {
        $select.html(ogHTML);
    }
}

请注意，所有这些函数都希望您传入jQuery元素。例如：

// in your search function...
var $s = $('select.someClass');
var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass');
restoreOptions($s); // Make sure you're working with a full deck
removeOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed

以下是一个工作示例：http://jsfiddle.net/9CYjy/23/

Answer 4

Ryan P的答案应改为：

    jQuery.fn.toggleOption = function (show) {
        $(this).toggle(show);
        if (show) {
            if ($(this).parent('span.toggleOption').length)
                $(this).unwrap();
        } else {
            **if ($(this).parent('span.toggleOption').length==0)**
                $(this).wrap('<span class="toggleOption" style="display: none;" />');
        }
    };

否则它会包含太多标签

Answer 5

toggleOption函数并不完美，并在我的应用程序中引入了令人讨厌的错误。 jQuery会与.val（）和.arraySerialize（）混淆尝试选择选项4和5以查看我的意思：

<select id="t">
<option value="v1">options 1</option>
<option value="v2">options 2</option>
<option value="v3" id="o3">options 3</option>
<option value="v4">options 4</option>
<option value="v5">options 5</option>
</select>
<script>
jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

$("#o3").toggleOption(false); 
$("#t").change(function(e) {
    if($(this).val() != this.value) {
    console.log("Error values not equal", this.value, $(this).val());
    }
});
</script>

Answer 6

以这种方式选择输入很棘手。如果禁用它，这将跨浏览器工作：

$('select').children(':nth-child(even)').prop('disabled', true);

这会禁用所有其他<option>元素，但您可以选择所需的元素。

以下是演示：http://jsfiddle.net/jYWrH/

注意：如果要删除元素的disabled属性，可以使用.removeProp('disabled')。

更新

您可以在隐藏的选择元素中保存要隐藏的<option>元素：

$('#visible').on('change', function () {
    $(this).children().eq(this.selectedIndex).appendTo('#hidden');
});

然后，您可以将<option>元素添加回原始选择元素：

$('#hidden').children().appendTo('#visible');

在这两个示例中，可见select元素的id为visible，隐藏的select元素的id为hidden。

以下是演示：http://jsfiddle.net/jYWrH/1/

请注意，.on()是jQuery 1.7中的新功能，此答案的用法与.bind()相同：http://api.jquery.com/on

Answer 7

简单回答：你做不到。表单元素的样式功能非常有限。

最好的选择是在选项上设置disabled=true（也许是灰色，因为只有IE自动执行此操作），这将使选项无法点击。

或者，如果可以，请完全删除option元素。

Answer 8

// Simplest way

var originalContent = $('select').html();

$('select').change(function() {
    $('select').html(originalContent); //Restore Original Content
    $('select option[myfilter=1]').remove(); // Filter my options
});

Answer 9

由于您已经在使用JS，因此您可以在页面上创建一个隐藏的SELECT元素，并且对于您要在该列表中隐藏的每个项目，将其移动到隐藏列表中。这样，它们就可以轻松恢复。

我不知道在纯CSS中这样做的方法......我会认为显示：没有技巧会有效。

Answer 10

您应该使用JavaScript从<select>删除它们。这是让它们消失的唯一保证方式。

Answer 11

!!!警告!!!

将第二个“IF”替换为“WHILE”或不起作用！

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        while( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

Answer 12

这个似乎适用于我的Chrome

$("#selectid span option").unwrap();
$("#selectid option:not([filterattr=filtervalue])").wrap('<span/>');

Answer 13

游戏后期，但其中大部分似乎都很复杂。

以下是我的表现：

var originalSelect = $('#select-2').html();

// filter select-2 on select-1 change
$('#select-1').change(function (e) {

    var selected = $(this).val();

    // reset select ready for filtering
    $('#select-2').html(originalCourseSelect);

    if (selected) {
        // filter
        $('#select-2 option').not('.t' + selected).remove();
    }

});

select-1的标记：

<select id='select-1'>
<option value=''>Please select</option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>

select-2的标记：

<select id='select-2'>
<option class='t1'>One</option>
<option class='t2'>Two</option>
<option>Always visible</option>
</select>

Answer 14

现代解决方案是简单地应用隐藏的 CSS，如：

<option value="" style="display:none;">Select Item</option>

或者跟班

<option value="" class="hidden">Please select</option>

注意在类案例中，添加类似的 css

.hidden {
  display: none;
}

如何使用CSS隐藏<select>菜单中的<option>？</select> </option>

14 个答案:

更新