发表新帖
发表新帖

How to hide a

前端 未结
关注
13 1544
庸人自扰
庸人自扰 2020-11-22 06:32

I\'ve realized that Chrome, it seems, will not allow me to hide in a

提交评论
  •  加载中...
  • 情话喂你
    2020-11-22 07:08

    this one seems to work for me in chrome

    $("#selectid span option").unwrap();
$("#selectid option:not([filterattr=filtervalue])").wrap('<span/>');
    0 讨论(0)
  • 心在旅途
    2020-11-22 07:09

    I would suggest that you do not use the solutions that use a <span> wrapper because it isn't valid HTML, which could cause problems down the road. I think the preferred solution is to actually remove any options that you wish to hide, and restore them as needed. Using jQuery, you'll only need these 3 functions:

    The first function will save the original contents of the select. Just to be safe, you may want to call this function when you load the page.

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

    This next function calls the above function to ensure that the original contents have been saved, and then simply removes the options from the DOM.

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

    The last function can be used whenever you want to "reset" back to all the original options.

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

    Note that all these functions expect that you're passing in jQuery elements. For example: 

    // 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

    Here is a working example: http://jsfiddle.net/9CYjy/23/

    0 讨论(0)
  • 没有蜡笔的小新
    2020-11-22 07:16 
    // Simplest way

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

$('select').change(function() {
    $('select').html(originalContent); //Restore Original Content
    $('select option[myfilter=1]').remove(); // Filter my options
});
    0 讨论(0)
  • 灰色年华
    2020-11-22 07:17

    You have to implement two methods for hiding. display: none works for FF, but not Chrome or IE. So the second method is wrapping the <option> in a <span> with display: none. FF won't do it (technically invalid HTML, per the spec) but Chrome and IE will and it will hide the option.

    EDIT: Oh yeah, I already implemented this in 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;" />' );
    }
};

    EDIT 2: Here's how you would use this function:

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

    EDIT 3: Added extra check suggested by @user1521986

    0 讨论(0)
  • 一个人的身影
    2020-11-22 07:17

    !!! WARNING !!!

    Replace the second "IF" by "WHILE" or doesn't work !

    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;" />' );
    }
};
    0 讨论(0)
    • 1 2 3 下一页
     看不清?
    提交回复
    热议问题