隱藏/顯示HTML網頁的部分基於用戶輸入

我有一個網頁，列出開放的工作在公司，按以下格式：隱藏/顯示HTML網頁的部分基於用戶輸入

標題：JavaScript開發

國家：美國馬里蘭州

描述：a; dlksfja; slfdja; sklfja; sldkfjas a; sldkfj a; lskdf a; slkdfj a; lsdkfj a; sdfj a; lsdkfj a; lsdkfj a; lsdkfj; alsdkfj a; lskdjf; alskdjf a; lsdkfj a; lsdkfj a ; lsdkfj a; lsdkfj a; slkdfj a; lskdfj a; lsdkfj a; lsdkjf; alskdjf; alskdjf; alsdkjf; alsdkfj a; lskdjf a; lskdj f; alsdkfj a; lsdkfj as; dlfkj a; slkdfj; alsdkjf; asld jf; alskdjf ; alsdkjf a; sdlfjk asd jf; asdkjlf; asdk LF焦耳;作爲dfla; skdj F; alskdjf一個; SLD發; sldkfj一個; lsdkfj一個; sldfj

薪資範圍：$ 75,000名 - $ 80,000

分類：軟件開發，UI/UX

標題：網絡安全分析

州：伊利諾伊州

說明：一，dlksfja; slfdja; sklfja; sldkfjas一個; sldkfj一個; lskdf一個; slkdfj一個; lsdkfj一個; sdfj一個; lsdkfj一個; lsdkfj一; lsdkfj; a lsdkfj a; lskdjf; alskdjf a; lsdkfj a; lsdkfj a; lsdkfj a; lsdkfj a; slkdfj a; lskdfj a; lsdkfj a; lsdkjf; alskdjf; alskdjf; alsdkjf; alsdkfj a; lskdjf a; lskdj f; alsdkfj a; lsdkfj作爲; dlfkj一個; slkdfj; alsdkjf; ASLD JF; alskdjf; alsdkjf一個; sdlfjk ASD JF; asdkjlf; asdklf焦耳;作爲dfla; skdj F; alskdjf一個; SLD發; sldkfj一個; lsdkfj一個; sldfj

工資範圍：$ 85,000個 - $ 90,000個

分類：網絡，網絡

標題：網絡軟件工程師 - Hadoop的

狀態：馬里蘭

描述：一個; dlksfja; slfdja; sklfja; sldkfjas一個; sldkfj一個; lskdf一個; slkdfj一個; lsdkfj一個; sdfj一個; lsdkfj一個; lsdkfj一個; lsdkfj; alsdkfj一個; lskdjf; alskdjf一個; lsdkfj a; lsdkfj a; lsdkfj a; lsdkfj a; slkdfj a; lskdfj a; lsdkfj a; lsdkjf; alskdjf; alskdjf; alsdkjf; alsdkfj a; lskdjf a; lskdj f; alsdkfj a; lsdkfj as; dlfkj a; slkdfj; alsdkjf; ASLD JF; alskdjf; alsdkjf一個; sdlfjk ASD JF; asdkjlf; asdklf焦耳;作爲dfla; skdj F; alskdjf一個; SLD發; sldkfj一個; lsdkfj一個; sldfj

薪資範圍：$ 120,000 - $ 130,000

類別：軟件工程，網絡，BigData

等

當我只有幾個工作列出，上述風格很好。現在我有近100個，我需要給用戶一種過濾他們看到的工作的方法。我想過濾「狀態」和各種「類型」。請參閱上面的一些示例，並注意每個作業只能有一個狀態，但它可能有一個或多個類型。

我想在頁面的頂部，在這裏用戶可以執行以下操作添加一個簡單的過濾部分：

1）從「國家」選擇下拉菜單，列出每個美國各州，加一個「全部」選項。

2）從「類型」下拉列表中選擇，該下拉列表列出了用於分類作業的每個類型，以及「全部」選項。

3）單擊「過濾器」按鈕，使匹配作業可見並隱藏不匹配的作業。

我不需要在狀態或類型字段中的多選功能。

任何有關如何以最簡單的方式做到這一點的建議將不勝感激。網站中沒有涉及任何數據庫 - 它只是一個靜態網站，我每週更新一次這個頁面，因爲新的工作打開和關閉。一旦我有這個工作，簡單的手動更新就完全正常了。

謝謝。

來源

2012-05-24 Ron Stanley

你能告訴我們標記？ – mattytommo

jQuery可以做這個簡短的工作。你是否反對使用它？ – Matthew

我不反對jQuery - 我只是不知道它，只需要幾個小時的工作即可完成，所以我正在尋找最簡單的方法。 –

你所需要的JavaScript（它不可能與純HTML）

與IDS然後使用類似

<script type="text/javascript"> 
    var sel = document.getElementById('yourDropDown'); 
    sel.onchange = function() { 
     var show = document.getElementById('yourDivId'); 
     show.style.display='none'; 
    } 
    </script>

歡呼定義你的過濾內容的div

來源

2012-05-24 13:58:34 konqi

隱藏/顯示HTML網頁的部分基於用戶輸入

回答

相關問題