Question

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

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

JS fiddle

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

禁用选项会在隐藏其他选项时导致占用空间。这是更新后的fiddle.

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

使用jQuery隐藏元素不会删除元素

4 个答案:

JS