如何隱藏html表單選擇選項？

我有一個非常簡單的形式，我想在另一個選擇字段細化它時隱藏選擇選項。如何隱藏html表單選擇選項？

目前我已經嘗試dispay: none作爲我的選項上的內聯樣式，但它沒有隱藏它。

我正在使用chrome，這需要跨所有瀏覽器工作。任何人都可以擺脫一些光，因爲我似乎無法在谷歌上找到很多東西。

請參閱我的問題在這裏生活...... http://jsfiddle.net/3vPgY/5/

在這裏，我當前的代碼...

<form> 
    <select id="refine"> 
     <option class="default" value="0">Please refine...</option> 
     <option value="green">Green</option> 
     <option value="blue">Blue</option> 
     <option value="red">Red</option> 
    </select> 
    <select id="everything" disabled="disabled"> 
     <option class="default" value="">Please select</option> 
     <option class="green" value="green-sel">Show only if Green selected</option> 
     <option class="green" value="green-sel">Show only if Green selected</option> 
     <option class="green" value="green-sel">Show only if Green selected</option> 
     <option class="blue" value="blue-sel">Show only if Blue selected</option> 
     <option class="blue" value="blue-sel">Show only if Blue selected</option> 
     <option class="blue" value="blue-sel">Show only if Blue selected</option> 
     <option class="red" value="red-sel">Show only if Red selected</option> 
     <option class="red" value="red-sel">Show only if Red selected</option> 
     <option class="red" value="red-sel">Show only if Red selected</option> 
    </select> 
</form>

我的jQuery腳本是suppost過濾第二個下拉...

$('#refine').change(function() { 

    var refine = $('option:selected', this).val().replace(/ /g, "-"); 

    if (refine != 0) { 

     $('#everything').removeAttr('disabled'); 
     $('#everything option:not(.default)').css('display', 'none'); 
     $('#everything .' + refine).css('display', 'block'); 

    } else { 

     $('#everything').attr('disabled', 'disabled'); 
     $('#everything option:not(.default)').css('display', 'none'); 

    } 

});

正如你可以看到我只想隱藏選項，而不是刪除。如果第一個下拉選項發生變化，我就可以以某種方式將它們帶回來。

任何建議將是最有幫助的 - 或者也許是解決辦法。

感謝

http://jsfiddle.net/3vPgY/5/

來源

2013-01-24 Joshc

您不能隱藏/刪除單個選項，只對他們適用的屬性disabled。它們會顯得灰暗，但不會被選中。

您可以保持一個變量對象，該對象包含select的默認配置的所有數據。然後，當你需要刪除你可以選擇的選項時，但仍然有辦法知道在所有條件對齊時需要選擇什麼。

來源

2013-01-24 23:02:19 scrappedcola

我認爲實現你想要的更簡單的方法是有三個不同的下拉列表來代替第二個下拉列表。然後，第一個下拉菜單可以根據它的值選擇要顯示哪一個。

更簡單。

隨着這種變化，你可以讓你的回調只是：

$('#refine').change(function() { 
    var refine = $('option:selected', this).val().replace(/ /g, "-"); 

    $('.refined').removeClass('hidden').addClass('hidden'); 
    $('#'+refine).removeClass('hidden').removeAttr('disabled'); 
});

編輯：forked your fiddle（也許編輯您原來的？）。它有我提出的改變。

來源

2013-01-24 23:09:09 Geoff

這不是做事情的最佳方式，最好是動態構建您的選擇。但是，如果你必須這樣做，使用下面的代碼：

$('#refine').change(function() { 

     var selected = $(this).val(); 
     $("#everything option").wrap("<span style='display:none' />"); 
     $("#everything option." + selected).unwrap(); 
     $("#everything").attr('disabled',false); 

});

我分叉在這裏：http://jsfiddle.net/AyX9Q/

請記住，代碼是最小的，只是向你展示瞭如何包裝的選項跨越並隱藏它們。如果您在第一次選擇時恢復爲「請選擇」，則不顯示所有選項。

來源

2013-01-24 23:33:14 BBagi

最後我用jquery clone，這似乎是伎倆。

http://jsfiddle.net/3vPgY/10/

var everything = $('#everything').clone(true); 

$('#refine').change(function() { 

    var selectColour = $('option:selected', this).val().replace(/ /g, "-"); 

    if (refine != 0) { 

     var everythingRefined = everything.clone(true).find('.default,.'+selectColour); 

     $('#everything').removeAttr('disabled'); 
     $('#everything').empty().append(everythingRefined); 

    } else { 

     $('#everything').attr('disabled', 'disabled'); 

    } 

});

來源

2013-01-25 17:56:45 Joshc

如何隱藏html表單選擇選項？

回答

相關問題