JavaScript - x3 Drop Down Selection Not Working
Question
I have 3 drop downs (selctors) the choice of each one reveals the next. Im having issues though with the initial menus disappearing, and more than 3 being present at once. Here's the code:
I'm new to coding, any help would be greatly appreciated! Cheers
<!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>
1 answers
solution1
0 2015-07-27 22:58:22
This might not solve the intended problem. But here are some pointers.
-You are not closing the select elements. make sure you include a closing tag.
<select id="target">
<option value="">First</option>
<option value="option100">100</option>
<option value="option200">200</option>
</select>
-Also you seem to be binding events for each element and the code inside each block is exactly the same. Instead bind the events to the tagNames or a specific class so as to avoid duplication.
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';
}
});
};
In this block of code
var vis = document.querySelector('.vis');
// returns more than 1 element as you are querying it by class name. So it should look like below.
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';
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Populate Drop down based on Selection in Javascript
Javascript textbox autocomplete clears drop down selection
how to “resubmit” drop-down selection with javascript?
Javascript Drop Down Menu not working
Drop down selection changes
styling drop down form element (selection) with CSS or Javascript
Javascript - Second Drop-down Menu Disappears After Selection?
Javascript - Action based on selection from drop down and checkbox
How to change drop down based on tab selection using javascript
javascript - drop down display on the second field based on selection in first field
Related Tags