Hiding elements using jQuery is not removing the space of the elements

Question

So I was wondering if anyone has an idea how to fix the following problem:

I have a drop-down menu with several options. Each option changes the page, while the header keeps the same pretty much.

All is working fine, but there another dropdown that simply either shows all of the options or hides some, to filter.

The problem is when I hide some, it creates some weird spaces in the first drop-down menu. I know I can create a different drop-down for each option on the second menu, but it seems like that solution is not optimal, so I was wondering if there's another one.

Here's a simplified fiddle showing my problem:

$('#select6, #select5, #select4, #select3, #select2, #select1').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col"> 

        <select class="form-control" id="matrizsele" onchange="location = this.options[this.selectedIndex].value;">
    <option disabled></option>
    <option id="select1" value="{{ route('layouts.documentos.matriz') }}">COMERC</option>
    <option id="select2" value="{{ route('layouts.documentos.matrizes.matriz2') }}">COMERC</option>
    <option id="select3" value="{{ route('layouts.documentos.matrizes.matriz3') }}">COMERC</option>
    <option id="select4" value="{{ route('layouts.documentos.matrizes.matriz4') }}">COMERC</option>
    <option id="select5" value="{{ route('layouts.documentos.matrizes.matriz5') }}">COMERC</option>
    <option id="select6" value="{{ route('layouts.documentos.matrizes.matriz6') }}">COMERC</option>
    <option disabled></option>
    <option id="select7" value="{{ route('layouts.documentos.matrizes.matriz7') }}">CONTR</option>  
    <option id="select8" value="{{ route('layouts.documentos.matrizes.matriz8') }}">CONTR</option>
    <option disabled></option>
    </select>
    </div>

JS fiddle

It seems like the problem is the disabled options rather than hidden ones. — ivanibash, Mar 27 '18 at 09:39
You can add a `class="hidden"` attribute to the options you want to hide, and in css do this: `.hidden{ display: none !important; }` — BRO_THOM, Mar 27 '18 at 09:40
I wanted to create a spacing between each group of options, but that might just be the case! Now I feel dumb. — JohnyJohnson, Mar 27 '18 at 09:41
Any idea of another way to make a separator between options? — JohnyJohnson, Mar 27 '18 at 09:41
One way to go is to put selectors on those disabled ones as well and hide them too. — ivanibash, Mar 27 '18 at 09:41
surely you wouldn't need the space between options if you only show one set at a time? — Pete, Mar 27 '18 at 09:42
@JohnyJohnson You could use tag https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup — ivanibash, Mar 27 '18 at 09:42
I don't get how this question got 4 correct answers while the question was poor, and the question is getting upvotes instead of downvotes, and answers getting downvotes instead of upvotes. Great work, SO... — Gyuhyeon Lee, Mar 27 '18 at 09:45
I would need the space between options because there is also one to "see all". As for the question being poor, ye I guess. Was a pretty silly mistake, my bad. Also the english might not be perfect because it is not my main language, sorry about that too. — JohnyJohnson, Mar 27 '18 at 09:52

Farhan Tahir · Accepted Answer · 2018-03-27T10:26:49.373

3

Those extra blanks are not spaces, those are empty disabled options.Remove the following from HTML snippet and it should work.

<option disabled></option>

edited Mar 27 '18 at 10:26

answered Mar 27 '18 at 09:43

Farhan Tahir

2,096
1
14
27

Thanks, that solved. It was pretty silly in hindsight. Still, I do have one question. On the second menu, there's the filtering option, but there's also the option to show all. In the "show all", the select menu is quite extensive, and I was using the disabled options as separators, to make it easy on the eye to the user. Any idea on another way to keep the separators, but also keeping it neat when I filter? Thanks in advance. – JohnyJohnson Mar 27 '18 at 10:01
@JohnyJohnson You can use `optgroup` Have a look at this: https://stackoverflow.com/questions/899148/html-select-option-separator – Farhan Tahir Mar 27 '18 at 10:11
I will try it out. If I can hide it like other options, this should be all solved. Thanks a lot, again. – JohnyJohnson Mar 27 '18 at 10:28

score 1 · Answer 2 · answered Mar 27 '18 at 09:42

You need to remove disabled options from your HTML.

<div class="col"> 
<select class="form-control" id="matrizsele" onchange="location = this.options[this.selectedIndex].value;">
    <option id="select1" value="{{ route('layouts.documentos.matriz') }}">COMERC</option>
    <option id="select2" value="{{ route('layouts.documentos.matrizes.matriz2') }}">COMERC</option>
    <option id="select3" value="{{ route('layouts.documentos.matrizes.matriz3') }}">COMERC</option>
    <option id="select4" value="{{ route('layouts.documentos.matrizes.matriz4') }}">COMERC</option>
    <option id="select5" value="{{ route('layouts.documentos.matrizes.matriz5') }}">COMERC</option>
    <option id="select6" value="{{ route('layouts.documentos.matrizes.matriz6') }}">COMERC</option>
    <option id="select7" value="{{ route('layouts.documentos.matrizes.matriz7') }}">CONTR</option>  
    <option id="select8" value="{{ route('layouts.documentos.matrizes.matriz8') }}">CONTR</option>
</select>
</div>

JS

$('#select6, #select5, #select4, #select3, #select2, #select1').hide();

Disabled option are causing the space when you hide other options. Here is an updated fiddle.

Moinul Islam · Answer 3 · 2018-03-27T09:44:19.530

0

You have to remove this(option) instead of disabled.

$("#matrizsele option[value='X']").each(function() {
  $(this).remove();
});

Note: Here X is your option value

edited Mar 27 '18 at 09:44

answered Mar 27 '18 at 09:38

Moinul Islam

469
2
9

so how you disabled it.did you use javascript for disabling?can you provide your code? Tthe concept is removed – Moinul Islam Mar 27 '18 at 09:51

score 0 · Answer 4 · answered Mar 27 '18 at 09:41

hiding isn't the issue; try removing meaningless code which is the following : <option disabled></option>

Here's a fixed fiddle : https://jsfiddle.net/nf8m46Lm/19/

The weird "spacing" you talk about is from <option disabled></option>. It's a blank disabled option, of course it displays a blank entry. To understand it better, try changing the code to <option disabled>foobarentry</option>.

Hiding elements using jQuery is not removing the space of the elements

4 Answers4

JS