級聯組合框HTML

我不是一個真正的網絡人，並且無法創建級聯組合框。我有我的選擇，但是當我無法弄清楚如何根據第一個框的選擇來執行JavaScript命令來切換第二個框。級聯組合框HTML

這是我的第一套方案：

<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來做到這一點，但如果有更好的方法來做到這一點，請讓我知道。

來源

2011-08-16 Solid1Snake1

鑑於修正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>

（注意改變id S，包裹形式的元素在一個form，添加一個字段，說明和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。

來源

2011-08-16 22:35:54

級聯組合框HTML

回答

相關問題