使用jQuery隐藏元素不会删除元素的空间

Question

所以我想知道是否有人知道如何解决以下问题：

我有一个带有几个选项的下拉菜单。 每个选项都会更改页面，而标题保持相同。

一切正常，但有另一个下拉列表，只显示所有选项或隐藏一些，过滤。

问题是当我隐藏一些时，它会在第一个下拉菜单中创建一些奇怪的空间。 我知道我可以为第二个菜单上的每个选项创建一个不同的下拉菜单，但似乎该解决方案不是最佳的，所以我想知道是否还有另一个。

这是一个简化的小提示，显示我的问题：

 $('#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小提琴

Answer 1

那些额外的空格不是空格，那些是空的禁用选项。从HTML片段中删除以下内容，它应该可以工作。

<option disabled></option>

Answer 2

您需要从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();

隐藏其他选项时，禁用选项会占用空间。 这是一个更新的小提琴。

Answer 3

您必须删除此（选项）而不是禁用。

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

注意：这里X是您的选项值

Answer 4

隐藏不是问题; 尝试删除无意义的代码，如下所示： <option disabled></option>

这是一个固定的小提琴： https ： //jsfiddle.net/nf8m46Lm/19/

你谈到的奇怪的“间距”来自<option disabled></option> 。 这是一个空白禁用选项，当然它显示一个空白条目。 要更好地理解它，请尝试将代码更改为<option disabled>foobarentry</option> 。