第二个下拉菜单在选择后消失
Javascript - Second Drop-down Menu Disappears After Selection?
我有多个相互关联的下拉菜单。第一个选择显示第二个菜单(两个中的一个)，第二个菜单又显示内容(菜单异常!)然而，当你完成这个过程时，第二个菜单消失了，我希望它保持打开状态，以便于访问。
目前我想坚持使用纯Javascript，请不要使用JQuery解决方案。
我是新编码，所以轻松哈哈。任何帮助都是感激的，干杯!document.getElementById('target').addEventListener('change', function() {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null) {
target.className = 'vis';
}
});
document.getElementById('trad').addEventListener('change', function() {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null) {
target.className = 'vis';
}
});
document.getElementById('simp').addEventListener('change', function() {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null) {
target.className = 'vis';
}
}); p {
font-size: 2.5vw;
font-family: arial;
}
select {
width: auto;
margin: 0;
font-size: 2.5vw;
font-family: arial;
}
.inv {
display: none;
}<select id="target">
<option value="">System</option>
<option value="trad">Traditional</option>
<option value="simp">Simplfit</option>
<select>
<select id="trad" class="inv">
<option value="">Width</option>
<option value="content1">400</option>
<option value="content2">600</option>
<option value="content3">800</option>
<option value="content4">1000</option>
<option value="content5">1210</option>
<select>
<select id="simp" class="inv">
<option value="">Width</option>
<option value="content6">400</option>
<option value="content7">600</option>
<option value="content8">800</option>
<option value="content9">1000</option>
<option value="content10">1210</option>
<select>
<p id="content1" class="inv">Content 1</p>
<p id="content2" class="inv">Content 2</p>
<p id="content3" class="inv">Content 3</p>
<p id="content4" class="inv">Content 4</p>
<p id="content5" class="inv">Content 5</p>
<p id="content6" class="inv">Content 6</p>
<p id="content7" class="inv">Content 7</p>
<p id="content8" class="inv">Content 8</p>
<p id="content9" class="inv">Content 9</p>
<p id="content10" class="inv">Content 10</p>问题是您为trad和simp处理程序获取可见元素的方式。
由于您正在使用queryselector获取.vis元素，它将返回当前选择元素，因为它具有vis类而不是content<'d>元素之一，只需微调选择器应解决问题。
document.getElementById('target').addEventListener('change', function() {
'use strict';
var vis = document.querySelector('select.vis'),
target = document.getElementById(this.value),
ct = document.querySelector('.content.vis');
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null) {
target.className = 'vis';
}
if (ct != null) {
ct.className = 'content inv';
}
});
document.getElementById('trad').addEventListener('change', function() {
'use strict';
var vis = document.querySelector('.vis:not(select)'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'content inv';
}
if (target !== null) {
target.className = 'content vis';
}
});
document.getElementById('simp').addEventListener('change', function() {
'use strict';
var vis = document.querySelector('.vis:not(select)'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'content inv';
}
if (target !== null) {
target.className = 'content vis';
}
});p {
font-size: 2.5vw;
font-family: arial;
}
select {
width: auto;
margin: 0;
font-size: 2.5vw;
font-family: arial;
}
.inv {
display: none;
}<select id="target">
<option value="">System</option>
<option value="trad">Traditional</option>
<option value="simp">Simplfit</option>
<!--Need closing tag here-->
</select>
<select id="trad" class="inv">
<option value="">Width</option>
<option value="content1">400</option>
<option value="content2">600</option>
<option value="content3">800</option>
<option value="content4">1000</option>
<option value="content5">1210</option>
<!--Need closing tag here-->
</select>
<select id="simp" class="inv">
<option value="">Width</option>
<option value="content6">400</option>
<option value="content7">600</option>
<option value="content8">800</option>
<option value="content9">1000</option>
<option value="content10">1210</option>
<!--Need closing tag here-->
</select>
<p id="content1" class="content inv">Content 1</p>
<p id="content2" class="content inv">Content 2</p>
<p id="content3" class="content inv">Content 3</p>
<p id="content4" class="content inv">Content 4</p>
<p id="content5" class="content inv">Content 5</p>
<p id="content6" class="content inv">Content 6</p>
<p id="content7" class="content inv">Content 7</p>
<p id="content8" class="content inv">Content 8</p>
<p id="content9" class="content inv">Content 9</p>
<p id="content10" class="content inv">Content 10</p>document.getElementById('target').addEventListener('change', function() {
'use strict';
var vis = document.querySelector('select.vis'),
target = document.getElementById(this.value),
ct = document.querySelector('.content.vis');
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null) {
target.className = 'vis';
}
if (ct != null) {
ct.className = 'content inv';
}
});
document.getElementById('trad').addEventListener('change', function() {
'use strict';
var vis = document.querySelector('.vis:not(select)'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'content inv';
}
if (target !== null) {
target.className = 'content vis';
}
});
document.getElementById('simp').addEventListener('change', function() {
'use strict';
var vis = document.querySelector('.vis:not(select)'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'content inv';
}
if (target !== null) {
target.className = 'content vis';
}
});p {
font-size: 2.5vw;
font-family: arial;
}
select {
width: auto;
margin: 0;
font-size: 2.5vw;
font-family: arial;
}
.inv {
display: none;
}<select id="target">
<option value="">System</option>
<option value="trad">Traditional</option>
<option value="simp">Simplfit</option>
<!--Need closing tag here-->
</select>
<select id="trad" class="inv">
<option value="">Width</option>
<option value="content1">400</option>
<option value="content2">600</option>
<option value="content3">800</option>
<option value="content4">1000</option>
<option value="content5">1210</option>
<!--Need closing tag here-->
</select>
<select id="simp" class="inv">
<option value="">Width</option>
<option value="content6">400</option>
<option value="content7">600</option>
<option value="content8">800</option>
<option value="content9">1000</option>
<option value="content10">1210</option>
<!--Need closing tag here-->
</select>
<p id="content1" class="content inv">Content 1</p>
<p id="content2" class="content inv">Content 2</p>
<p id="content3" class="content inv">Content 3</p>
<p id="content4" class="content inv">Content 4</p>
<p id="content5" class="content inv">Content 5</p>
<p id="content6" class="content inv">Content 6</p>
<p id="content7" class="content inv">Content 7</p>
<p id="content8" class="content inv">Content 8</p>
<p id="content9" class="content inv">Content 9</p>
<p id="content10" class="content inv">Content 10</p>相关文章：
- 当选择不同的父母时，我如何使条件形式的孩子消失并清除
- 选择非空选项后，默认选项消失
- 当我在HTML中选择特定选项时，要消失的输入字段
- Bootstrap-select.js-选择一个选项后，整个选择将消失
- Javascript:选择页面上的所有复选框.它会检查所有内容一秒钟，然后消失
- 当父选择为空时，子选择列表中的默认值将消失
- 选择日期时间选择器在单击JQuery UI对话框时消失
- jQueryUI的日期选择器不会在选择日期时消失
- __proto__，什么时候会消失?选择
- 为什么我必须在IE中单击选择框选项两次才能使其消失
- Jquery ajax 调用从日期选择器上选择消失文本框
- Javascript - 如果选择了某个选项，则使元素消失
- 在IE 8中选择鼠标悬停时消失的选项
- 图例中的AmStockChart值在选择与原始数据集不同的数据集后消失
- 选择选项在打开后消失
- 使以前选择的单词消失在html上，并在javascript的Hangman游戏中替换新单词
- 如何为一个样式表每次刷新随机图像，但在选择另一个样式表时消失
- 附加到<选择>使用jquery的标记在函数超出范围后消失
- 当一个项被选中时，AngularJS的选择框选项就会消失
- 第二个下拉菜单在选择后消失
