Issue
Below I paste code for simple dropdown with some options.
Choose a module:
<select name="modules" id="module-select">
<option value="">--Please choose an option--</option>
<option value="module1">Module1</option>
<option value="module2">Module2</option>
<option value="module3">Module3</option>
<option value="module4">Module4</option>
<option value="module5">Module5</option>
<option value="module6">Module6</option>
</select>
<br /><br /><br />
<!-- options for module 1 --->
<label for="server-select">Choose a server:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="server1">Server1</option>
<option value="server2">Server2</option>
<option value="server3">Server3</option>
<option value="server4">Server4</option>
<option value="server5">Server5</option>
<option value="server6">Server6</option>
</select>
<br /><br /><br />
<!-- options for module 2 --->
<label for="server-select">Choose a server:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="server1">Server1</option>
<option value="server2">Server2</option>
<option value="server3">Server3</option>
<option value="server4">Server4</option>
<option value="server5">Server5</option>
<option value="server6">Server6</option>
</select>
<!-- etc -->
<style>
label,
footer {
font-family: sans-serif;
}
label {
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: .9rem;
padding: 2px 5px;
}
footer {
font-size: .8rem;
position: absolute;
bottom: 30px;
left: 30px;
}
.output {
background: center/cover no-repeat url('/media/cc0-images/hamster.jpg');
position: relative;
}
</style>
I need display options for module 1, if customer select from first dropdown module1 I need display options for module 2, if customer select module2 from first dropdown
Can anyone help me how to resolve this?
Solution
var el = document.getElementById("module-select");
el.addEventListener("change", choosemodule, false);
function choosemodule() {
var m = document.getElementsByClassName('h');
for (i = 0; i < m.length; i++) {
m[i].style.display = 'none';
}
var n = document.getElementById("module-select").selectedIndex;
if (n > 0) {
document.getElementById('s' + n).style.display = 'block';
}
}
label,
footer {
font-family: sans-serif;
}
label {
font-size: 1rem;
padding-right: 10px;
}
select {
font-size: .9rem;
padding: 2px 5px;
}
footer {
font-size: .8rem;
position: absolute;
bottom: 30px;
left: 30px;
}
.output {
background: center/cover no-repeat url('/media/cc0-images/hamster.jpg');
position: relative;
}
.h {
display: none;
}
<select name="modules" id="module-select">
<option value="">--Please choose an option--</option>
<option value="module1">Module1</option>
<option value="module2">Module2</option>
<option value="module3">Module3</option>
<option value="module4">Module4</option>
<option value="module5">Module5</option>
<option value="module6">Module6</option>
</select>
<br /><br /><br />
<div id="s1" class="h">
<!-- options for module 1 --->
<label for="server-select">Choose a server 1:</label>
<select name="servers">
<option value="">--Please choose an option--</option>
<option value="server1">Server1</option>
<option value="server2">Server2</option>
<option value="server3">Server3</option>
<option value="server4">Server4</option>
<option value="server5">Server5</option>
<option value="server6">Server6</option>
</select>
</div>
<br /><br /><br />
<!-- options for module 2 --->
<div id="s2" class="h">
<label for="server-select">Choose a server 2:</label>
<select name="servers">
<option value="">--Please choose an option--</option>
<option value="server1">Server1</option>
<option value="server2">Server2</option>
<option value="server3">Server3</option>
<option value="server4">Server4</option>
<option value="server5">Server5</option>
<option value="server6">Server6</option>
</select>
</div>
<div id="s3" class="h">s3</div>
<div id="s4" class="h">s4</div>
<div id="s5" class="h">s5</div>
<div id="s6" class="h">s6</div>
<!-- etc -->
Answered By - Kazakh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.