Javascript 层叠组合框HTML
我不是一个真正的网络人,在创建级联组合框时遇到了麻烦。我有自己的选择,但当我无法确定如何使用JavaScript命令根据第一个框的选择切换第二个框时 以下是我的第一组选项:Javascript 层叠组合框HTML,javascript,html,drop-down-menu,Javascript,Html,Drop Down Menu,我不是一个真正的网络人,在创建级联组合框时遇到了麻烦。我有自己的选择,但当我无法确定如何使用JavaScript命令根据第一个框的选择切换第二个框时 以下是我的第一组选项: <select id="searchType" onchange="selectedOption(this)"> <option value="sessions">Sessions</option> <option value="files">Files</opt
<select id="searchType" onchange="selectedOption(this)">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
会议
文件夹
客户
根据他们单击的内容,我想显示以下选项集:
<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>
配置ID
长度
日期
档案
文件ID
长度
发送
会话ID
客户
<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>
客户名称
组织机构
专业
会话ID
最后,输入一个文本框来指定搜索。
我再次尝试使用JavaScript来完成此操作,但如果有更好的方法,请告诉我。鉴于修改后的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>
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';
};