How to enable/disable and change color of some links depending on the selection user have made from a - slect dropdown menu -
Question
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 wich 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>
5 answers
solution1
1 2017-03-10 21:07:05
Use jQuery and do something like this:
$('.select-box').on('change', function() {
$('.link').attr('disabled','disabled');
$('.link.' + $(this).val()).removeAttr('disabled');
});
Then on each of your links put the appropriate classes like so:
<a href="whatever" class="link option1" disabled>whatever</a>
solution2
0 2017-03-10 21:05:43
set the disabled attribute for all the anchor tags and then remove the attribute based on your dropdown selection
<a href="resource1.html" id="res1">
<div class="resource-link">
Link to Resource 1
</div>
</a>
$('.select-box').change(function(){
$('#res1,#res2...').removeAttr('disabled');
});
solution3
0 2017-03-10 21:05:49
You may use something like this
$("select.select-box").change(function () {
var selected = $(this).val();
switch (selected) {
case "Option1":
//enable the link you want
$("ul li a").first()
.removeAttr("disabled") // enable the link
.addClass('active'); // style it
case "Option2":
.....
case "Option3":
.....
case "Option4":
.....
case "Option5":
.....
}
});
solution4
0 ACCPTED 2017-03-10 21:13:53
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>
solution5
0 2017-03-10 21:21:54
Changing font-weight, but you can adjust code as you wish. It's not clear for me what exactly you want. You didn't provide any desired styles, that should be applied to selected item.
var smart, that; smart = document.querySelector('.select-box'); that = document.querySelectorAll('ul a'); //console.log(that); smart.addEventListener('change', function() { var enough; enough = smart.value; enough = enough.replace(/[^\\d]/g, ''); enough = Number(enough); Array.prototype.filter.call(that, function(thoughts) { return thoughts.style.fontWeight === 'bold'; }).forEach(function(here) { here.style.fontWeight = ''; }); Array.prototype.filter.call(that, function(sea) { return new RegExp(enough + '\\\\.html').test(sea.href); }).forEach(function(sea) { sea.style.fontWeight = 'bold'; }); })
.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>
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.