Question

我有3个下拉（selctors）每个的选择揭示了下一个。我的问题虽然初始菜单消失了，一次超过3个。这是代码：

我是编码新手，非常感谢任何帮助！干杯

<!doctype html>

<html>

<head>

<style>

p {
font-size:2.5vw;
font-family:arial;
}

select {
width:auto;
margin:0;
font-size:2.5vw;
font-family:arial;
}

.inv {
display: none;
}

</style>

</head>

<body>

<select id="target">
<option value="">First</option>
<option value="option100">100</option>
<option value="option200">200</option>
<select>




<select id="option100" class="inv">
<option value="">Second</option>
<option value="option110">110</option>
<option value="option120">120</option>
<select>

<select id="option200" class="inv">
<option value="">Second</option>
<option value="option210">210</option>
<option value="option220">220</option>
<select>




<select id="option110" class="inv">
<option value="">Third</option>
<option value="option111">111</option>
<option value="option112">112</option>
<select>

<select id="option120" class="inv">
<option value="">Third</option>
<option value="option121">121</option>
<option value="option122">122</option>
<select>

<select id="option210" class="inv">
<option value="">Third</option>
<option value="option211">211</option>
<option value="option212">212</option>
<select>

<select id="option220" class="inv">
<option value="">Third</option>
<option value="option221">221</option>
<option value="option222">222</option>
<select>


<script>

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('option100')
.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('option200')
.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('option110')
.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('option120')
.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('option210')
.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('option220')
.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('option111')
.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('option112')
.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('option121')
.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('option122')
.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('option211')
.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('option212')
.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('option221')
.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('option222')
.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';
}
});

</script>

</body>

</html>

Answer 1

这可能无法解决预期的问题。但这里有一些指示。

- 您没有关闭select元素。确保包含结束标记。

<select id="target">
   <option value="">First</option>
   <option value="option100">100</option>
   <option value="option200">200</option>
</select>

- 你似乎是每个元素的绑定事件，每个块内的代码完全相同。而是将事件绑定到tagNames或特定类，以避免重复。

var selects = document.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++) {
    selects[i].addEventListener('change', function () {
        'use strict';
        var vis = document.querySelector('.vis'),
            target = document.getElementById(this.value);
        if (vis !== null) {
            for (var j = 0; j < vis.length; j++) {
                vis[j].className = 'inv';
            }

        }
        if (target !== null) {
            target.className = 'vis';
        }
    });
};

在这段代码中

var vis = document.querySelector('.vis');

//返回多个元素，因为您按类名查询它。所以它应该如下所示。

var vis = document.querySelector('.vis'),
    target = document.getElementById(this.value);
    if (vis !== null) {
       for (var j = 0; j < vis.length; j++) {
          vis[j].className = 'inv';
       }
    }

JavaScript - x3下拉选择不起作用

1 个答案: