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

【问题标题】：Hiding elements using jQuery is not removing the space of the elements使用 jQuery 隐藏元素不会删除元素的空间
【发布时间】：2018-03-27 09:32:53
【问题描述】：

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

我有一个包含多个选项的下拉菜单。每个选项都会改变页面，而标题几乎保持不变。

一切正常，但还有另一个下拉列表，它要么显示所有选项，要么隐藏一些选项，以进行过滤。

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

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

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

【问题讨论】：

为什么你添加了空的禁用选项？
问题似乎在于禁用选项而不是隐藏选项。
您可以在要隐藏的选项中添加class="hidden" 属性，并在css中执行此操作：.hidden{ display: none !important; }
@JohnyJohnson 你可以使用标签w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
我不明白这个问题是如何得到 4 个正确答案的，而这个问题很差，而且问题是获得赞成票而不是反对票，答案是反对票而不是赞成票。干得好，所以...

标签： javascript jquery css

【解决方案1】：

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

<option disabled></option>

【讨论】：

谢谢，解决了。事后看来，这很愚蠢。不过，我确实有一个问题。在第二个菜单上，有过滤选项，但也有显示全部的选项。在“显示全部”中，选择菜单非常广泛，我使用禁用的选项作为分隔符，以方便用户使用。关于保持分隔符的另一种方法的任何想法，但在我过滤时也保持整洁？提前致谢。
@JohnyJohnson 你可以用optgroup看看这个：stackoverflow.com/questions/899148/html-select-option-separator
我会试试的。如果我可以像其他选项一样隐藏它，这应该都解决了。非常感谢，再次。

【解决方案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();

当您隐藏其他选项时，禁用的选项会导致空格。这是更新的fiddle.

【讨论】：

【解决方案3】：

隐藏不是问题；尝试删除以下无意义的代码：<option disabled></option>

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

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

【讨论】：

【解决方案4】：

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

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

注意：这里 X 是您的期权价值

【讨论】：

那么您是如何禁用它的。您是否使用 javascript 来禁用它？您能提供您的代码吗？该概念被删除