カスケードコンボボックスHTML

Question

私は実際にウェブ担当者ではなく、カスケードコンボボックスの作成に問題があります。私のオプションはありますが、JavaScriptコマンドを使って最初のボックスの選択に応じて2番目のボックスを切り替える方法がわからないときは、彼らは、私はオプションのこれらのセットを表示したいと思いそこをクリック内容に応じて

<select id="searchType" onchange="selectedOption(this)"> 
    <option value="sessions">Sessions</option> 
    <option value="files">Files</option> 
    <option value="clients">Clients</option> 
</select> 

：

SESSIONS

<select id="secondOptions"> 
    <option value="conf">Config ID</option> 
    <option value="length">Length</option> 
    <option value="date">Date</option> 
</select> 

FILES

これらはオプションの私の最初のセットです

<select id="secondOptions"> 
     <option value="id">File ID</option> 
     <option value="length">Length</option> 
     <option value="sent">Sent</option> 
     <option value="sessionId">Session ID</option> 
</select> 

クライアント

<select id="secondOptions"> 
     <option value="name">Client Name</option> 
     <option value="organization">Organization</option> 
     <option value="specialty">Specialty</option> 
     <option value="sessionId">Session ID</option> 
</select> 

最後に、実際に検索を指定するテキストボックス。 もう一度、JavaScriptを使用してこれを実行しようとしていますが、これを行うより良い方法がある場合はお知らせください。

Answer 1

考える修正HTMLマークアップ：

<form action="#" method="post"> 
    <select id="searchType"> 
     <option value="sessions">Sessions</option> 
     <option value="files">Files</option> 
     <option value="clients">Clients</option> 
    </select> 

    <select id="sessions"> 
     <option value="conf">Config ID</option> 
     <option value="length">Length</option> 
     <option value="date">Date</option> 
    </select> 

    <select id="files"> 
     <option value="id">File ID</option> 
     <option value="length">Length</option> 
     <option value="sent">Sent</option> 
     <option value="sessionId">Session ID</option> 
    </select> 

    <select id="clients"> 
     <option value="name">Client Name</option> 
     <option value="organization">Organization</option> 
     <option value="specialty">Specialty</option> 
     <option value="sessionId">Session ID</option> 
    </select> 

    <fieldset id="textAreaSearchBox"> 
     <legend>Search:</legend> 
     <textarea></textarea> 
    </fieldset> 
</form> 

（formのフォーム要素をラップ、変更id S注、マークアップ内のフィールドセット、凡例とTEXTAREAの添加）、次のJavaScriptが動作しているようです：

var select1 = document.getElementById('searchType'); 
var selects = document.getElementsByTagName('select'); 

select1.onchange = function() { 
    var select2 = this.value.toLowerCase(); 
    for (i = 0; i < selects.length; i++) { 
     if (selects[i].id != this.id) { 
      selects[i].style.display = 'none'; 
     } 
    } 
    document.getElementById(select2).style.display = 'block'; 
    document.getElementById('textAreaSearchBox').style.display = 'block'; 
}; 

JS Fiddle demo