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