发表新帖
发表新帖

How to hide a

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

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

提交评论
  •  加载中...
  • 猫巷女王i
    2020-11-22 07:22

    Since you're already using JS, you could create a hidden SELECT element on the page, and for each item you are trying to hide in that list, move it to the hidden list. This way, they can be easily restored.

    I don't know a way offhand of doing it in pure CSS... I would have thought that the display:none trick would have worked.

    0 讨论(0)
  • 情歌与酒
    2020-11-22 07:28

    Late to the game, but most of these seem quite complicated.

    Here's how I did it:

    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();
    }

});

    markup of select-1:

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

    markup of select-2:

    <select id='select-2'>
<option class='t1'>One</option>
<option class='t2'>Two</option>
<option>Always visible</option>
</select>
    0 讨论(0)
  • 野趣味
    2020-11-22 07:29

    You should remove them from the <select> using JavaScript. That is the only guaranteed way to make them go away.

    0 讨论(0)
  • 时光取名叫无心
    2020-11-22 07:31

    The toggleOption function is not perfect and introduced nasty bugs in my application. jQuery will get confused with .val() and .arraySerialize() Try to select options 4 and 5 to see what I mean:

    <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>
    0 讨论(0)
  • 渐次进展
    2020-11-22 07:33

    Ryan P's answer should be changed to:

        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;" />');
        }
    };

    Otherwise it gets wrapped in too many tags

    0 讨论(0)
    • 上一页 1 2 3 下一页
     看不清?
    提交回复
    热议问题