首頁猿問如何在帶有CSS的<sele...

如何在帶有CSS的<select>菜單中隱藏<選項(xiàng)>？

JavaScript JQuery Html/CSS

慕虎7371278 2019-07-01 10:18:49

如何在帶有CSS的<select>菜單中隱藏<選項(xiàng)>？我意識到Chrome似乎不允許我隱藏<option>在.<select>..火狐會(huì)的。我要藏起來<option>與搜索標(biāo)準(zhǔn)相匹配的。在Chrome Web工具中，我可以看到它們被正確地設(shè)置為display: none;我的JavaScript，但是有一次<select>單擊菜單，就會(huì)顯示它們。我怎么做這些<option>與我的搜索標(biāo)準(zhǔn)相匹配的是，單擊菜單時(shí)不顯示嗎？謝謝!

查看完整描述

3 回答

侃侃無極

TA貢獻(xiàn)2051條經(jīng)驗(yàn) 獲得超10個(gè)贊

您必須實(shí)現(xiàn)兩個(gè)隱藏方法。display: none適用于FF，但不適用于Chrome或IE。因此，第二個(gè)方法是包裝<option>在.<span>帶著display: none..FF不會(huì)這么做(技術(shù)上無效的HTML，根據(jù)規(guī)范)，但是Chrome和IE會(huì)，它會(huì)隱藏這個(gè)選項(xiàng)。

編輯：噢，是的，我已經(jīng)用jQuery實(shí)現(xiàn)了這個(gè)：

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }};

編輯2：下面是如何使用這個(gè)函數(shù)：

jQuery(selector).toggleOption(true); // show optionjQuery(selector).toggleOption(false); // hide option

編輯3：添加@user 1521986建議的額外檢查

反對回復(fù) 2019-07-01

喵喔喔

TA貢獻(xiàn)1735條經(jīng)驗(yàn) 獲得超5個(gè)贊

對于HTML 5，可以使用“隱藏”屬性。

<option hidden>Hidden option</option>

它是不但如果您只需要隱藏幾個(gè)元素，那么與添加/刪除元素或不進(jìn)行語義正確的構(gòu)造相比，最好將隱藏屬性與禁用的屬性組合起來。

<select> <option>Option1</option> <option>Option2</option> <option hidden>Hidden Option</option> </select>

參照系.

反對回復(fù) 2019-07-01

3 回答
0 關(guān)注
2126 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

如何在帶有CSS的<select>菜單中隱藏<選項(xiàng)>？

如何在帶有CSS的<select>菜單中隱藏<選項(xiàng)>？

3 回答

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何在帶有CSS的<select>菜單中隱藏<選項(xiàng)>？

如何在帶有CSS的<select>菜單中隱藏<選項(xiàng)>？

3 回答

相關(guān)問題推薦

添加回答

如何在帶有CSS的<select>菜單中隱藏<選項(xiàng)>？