Hello. Any help will be greatly appreciated!.
I have a html file where there is a select dropdown menu with 5 options and just below it there will be a yet not determined number of links.
When user arrive to this page, the dropdown menu will be in it's default option which is "Choose an option". In this state, all links below should be not clickable and greyed out (disabled).
Then, depending on user's selection from dropdown menu, some of the links below should change its color to blue and should become clickable and some others should remain not clickable and greyed out.
The reason we need this is because links point to resources and not all resources are available for all the options from the dropdown menu.
I have no experience in JavaScript / jQuery, so I know how to apply the style but not in a conditionally way.
.select-box {
border-radius: 5px;
font-size: 18px;
height: 35px;
width: 200px;
}
.resource-link {
border: solid;
border-width: 4px;
border-color: grey;
border-radius: 10px;
color: grey;
display: inline-block;
height: 40px;
margin-right: 75px;
margin-top: 20px;
text-align: center;
width: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<select class="select-box">
<option value="choose">Choose an option</option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
<option value="Option4">Option 4</option>
<option value="Option5">Option 5</option>
</select>
<ul >
<a href="resource1.html">
<div class="resource-link">
Link to Resource 1
</div>
</a>
<a href="resource2.html">
<div class="resource-link">
Link to Resource 2
</div>
</a>
<a href="resource3.html">
<div class="resource-link">
Link to Resource 3
</div>
</a>
<a href="resource4.html">
<div class="resource-link">
Link to Resource 4
</div>
</a>
<a href="resource5.html">
<div class="resource-link">
Link to Resource 5
</div>
</a>
</ul>
</body>
</html>You can set the pointer-events of the links to none by default (so they are disabled), then monitor the change event of the select to trigger an .active class on the links' parent elements and conditionally change pointer-events and color and whatever else you want with the selected option from the select list.
I've reduced your example down to 2 items because you have broken HTML. You need to add li's to wrap the a links in your ul.
var selectBox = document.getElementById('select-box'),
lis = document.getElementById('options-list').getElementsByTagName('li');
selectBox.addEventListener('change',function() {
var val = this.value;
for (var i = 0; i < lis.length; i++) {
if (lis[i].classList.contains(val)) {
lis[i].classList.add('active');
} else {
lis[i].classList.remove('active');
}
}
}).select-box {
border-radius: 5px;
font-size: 18px;
height: 35px;
width: 200px;
}
.options-list a {
border: solid;
border-width: 4px;
border-color: grey;
border-radius: 10px;
color: grey;
display: inline-block;
height: 40px;
margin-right: 75px;
margin-top: 20px;
text-align: center;
width: 100px;
text-decoration: none;
pointer-events: none;
}
.active a {
pointer-events: auto;
color: blue;
}<select class="select-box" id="select-box">
<option value="choose">Choose an option</option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
</select>
<ul class="options-list" id="options-list">
<li class="Option1">
<a href="resource1.html">
<div class="resource-link">
Link to Resource 1
</div>
</a>
</li>
<li class="Option2">
<a href="resource2.html">
<div class="resource-link">
Link to Resource 2
</div>
</a>
</li>
<li class="Option2">
<a href="resource2-1.html">
<div class="resource-link">
Another Link to Resource 2
</div>
</a>
</li>
</ul>