1. 程式人生 > >IE瀏覽器不支援display:none導致option不能隱藏的問題

IE瀏覽器不支援display:none導致option不能隱藏的問題

專案場景:級聯的select元素,根據一級select的選擇,二級select中的option選項需要對應的隱藏或顯示。

原來的做法是display:none和display:block來隱藏和顯示option,option中通過自定義屬性data-category過濾,控制option的隱藏或顯示,結果在IE瀏覽器中並不能達到想要的效果,通過網路查詢,是因為IE瀏覽器不支援display:none屬性。

解決方案:

1、給option外加一個父級標籤,並設定父級標間隱藏[此處用的是span標籤],如果要顯示的話則去除父級標籤即可(網路上查詢的方法)

2、在一級select的onchange事件觸發的方法中按選擇的option的值判斷,通過$(selector).html("option的html程式碼")方法直接覆蓋二級select的option內容

具體參考如下:

//html程式碼 


//方案一


//方案二 

相關推薦

IE瀏覽器支援display:none導致option隱藏的問題

專案場景:級聯的select元素,根據一級select的選擇,二級select中的option選項需要對應的隱藏或顯示。 原來的做法是display:none和display:block來隱藏和顯示o

10個很有用但是IE瀏覽器支援的CSS屬性

儘管我們對CSS已經非常熟悉,應付日常的工作或在各個瀏覽器中搞定CSS的相容性已經很得心應手,但是並不是所有的CSS屬性都是那麼的常用。在本文中,讓我們看看10個可能非常有用但是在該死的IE瀏覽器中(主要是IE6和IE7)卻不能使用的CSS屬性。看完了該文,你可能會更加討厭

IE 瀏覽器支援 ES6 Array.from(new Set( )) SCRIPT438: 物件支援“from”屬性

【轉】 解決老瀏覽器不支援ES6的方法 現象: Array.from(new Set( )) SCRIPT438: 物件不支援“from”屬性或方法   解決方法: 安裝babel 引入browser.min.js   &nbs

IE瀏覽器支援document.getElementByClassName()

當我們寫程式碼時,尤其是要獲得一個物件的className值時,在IE下是不支援document.getElementByClassName()這種方法的,那麼我們可以自己寫一個方法用來獲取class

Spring MVC 檔案下載IE瀏覽器支援的問題解決

  今天碰到一個比較奇怪的技術問題,使用Spring MVC做檔案下載時,FireFox、Chrome瀏覽器下載都沒有遇到問題,IE 11卻不能正常下載,總是提示“可能已刪除或移動檔案”。大家都說是IE瀏覽器不支援HTTP CREATED(201)狀態碼,但事實上我返回的是

解決IE瀏覽器支援console,報錯未定義問題

問題產生:   前端開發除錯經常用到console.info進行列印資訊,前幾天除錯的時候Google功能完全OK,但是IE8瀏覽器點設定按鈕完全沒反應,看了修改的程式碼貌似沒看出什麼存在瀏覽器相容性

IE瀏覽器下AJAX快取問題導致資料更新的解決辦法

描述 做專案時遇到的問題: 通過AJAX請求後臺時,當引數相同,IE瀏覽器會從快取中取值而非從重新請求伺服器。其他使用非IE核心的瀏覽器並無此問題。 解決 有兩種解決辦法; 其一: 在AJAX請求

解決IE支援display:inline-block;

對於IE不支援display:inline-block;的解決方法 .triangle-left{ height:0px; width:0px; border:30px so

github支援tls1.1導致egit cannot open git-upload-pack

【前言】 本文可以當小說看,懸疑小說。 【起因】 過年後開始上班,大概是2.22開始上班,到昨天2.25發現問題, myeclipse的egit不能clone和pull github上的專案了。 報錯資訊cannot open git-upload-pack, 2.25的時候

Android手機上瀏覽器支援帶埠號wss解決方案

首先抄個示例過來,命名為wss-test.html,然後傳到伺服器: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html"

關於ie9以下瀏覽器支援html5元素

ie9以下的瀏覽器都不能支援html5標籤(article,aside,dialog,footer,header,section,footer,nav,figure,menu)。 方法一: !--[

vue介面在Ie瀏覽器顯示的解決方法

 之前使用網上普通的用的安裝polyfill依賴的方法,發現並無作用,偶然間看到別人寫的下面的方法,發現可以完美解決。IE瀏覽器不調介面的問題。 本人親測下列兩種方法可行: 法一:webpack.base.conf.js中配置 entry: {     // "babe

Chrome瀏覽器支援字型小於12px的解決辦法

      谷歌瀏覽器預設最小字型為12px,小於12px的字型它都以12px顯示,具體效果見下圖。有些特殊情況下我們需要字型小點,特別是在製作英文網站的時候,怎麼辦?既然有問題,我們就有解決問題的方法。 <p>xjun0812測試16畫素</p>

javaScript解析XML時IE11瀏覽器支援xmlDoc.load()方法

大家直接看原始碼和截圖吧!jsResolveXML.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用javascript解析xml&

微信瀏覽器支援下載解決方案--跳轉到預設瀏覽器開啟

在微信的內建瀏覽器(QQ內建瀏覽器也一樣)裡他遮蔽了下載連結,不管是app的下載連結,還是普通檔案的連結都遮蔽了,這個問題有兩個解決方案。首先如果你是App下載連結就傳到騰訊應用寶,但是這會給應用寶帶來流量,如果二次下載折損率很高。其二就是提示引導使用者在瀏覽器開啟所以如果你沒有將軟體上傳到應用寶裡,或者你的

IE瀏覽器url帶中文引數導致亂碼問題(chrome下正常)

問題: E瀏覽器下url帶中文請求引數,伺服器端使用new String(param.getBytes(“iso-8859-1”), “utf-8”)後仍然會亂碼。 但使用chrome瀏覽器則正常。 程式碼如下: 解決: 使用URLEncoder和URLDecod

ie8以下版本(包括ie8)的瀏覽器支援html5標籤屬性解決方案(Modernizr 2.6.2外掛的使用)

我這邊申明下:我寫這篇日誌主要是想然ie8能夠支援html5的個別標籤閉合,並不能讓ie完全支援html5,我之前寫的可能會誤導很多同學,希望大家能明白。 今天腦抽想用html5標籤設計一個網頁,我本人用的是火狐瀏覽器,都弄好後我發現一個很嚴重的問題,除了ie9以下

webkit核心瀏覽器支援小於12px字型的設定

1. 設定 css3的transform屬性 2. 行內元素不支援這個屬性,因此要將其變成塊狀元素再使用 3. 舊版本的webkit支援 -webkit-text-size-adjust屬性,但是目前已經不支援了

解決老瀏覽器支援ES6的方法

轉載地址:http://www.rockyxia.com/?p=669 為什麼ES6會有相容性問題? 由於廣大使用者使用的瀏覽器版本在釋出的時候也許早於ES6的定稿和釋出,而到了今天,我們在程式設計中如果使用了ES6的新特性,瀏覽器若沒有更新版本,或者新版本中沒有對ES6的

vue.js 微信瀏覽器支援lambda表示式

最近嘗試在用vue重構一個微信網頁,然後發現在本地測試是可以的,在微信測試工具裡也是正常的,然後在手機裡有人正常有人不正常,後來發現規律,微信比較新的是不支援的,微信比較舊的是不支援的。然後網上谷歌了很久未果,知道最後才想到是不是lambda表示式的問題,然後嘗試將then