级联组合框 HTML答案

【问题标题】：Cascading Combo box HTML级联组合框 HTML
【发布时间】：2012-05-19 01:14:09
【问题描述】：

我不是真正的网络人，在创建级联组合框时遇到了麻烦。我有我的选择，但是当我无法弄清楚如何根据第一个框的选择执行 JavaScript 命令来切换第二个框时。

这些是我的第一组选项：

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

根据他们点击的内容，我想显示这些选项：

会议

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

文件

<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 执行此操作，但如果有更好的方法，请告诉我。

【问题讨论】：

标签： javascript html drop-down-menu

【解决方案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>

（注意更改后的ids，将表单元素包装在form 中，在标记中添加了字段集、图例和文本区域），以下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.

【讨论】：