[英]How to enable/disable and change color of some links depending on the selection user have made from a - slect dropdown menu -
你好。 任何帮助将不胜感激！。
我有一个html文件，其中有一个带有5个选项的选择下拉菜单，而在它的正下方，将有一个尚未确定的链接数。
当用户到达此页面时，下拉菜单将位于其默认选项中，即“选择一个选项”。 在这种状态下，下面的所有链接都不应被单击并变灰（禁用）。
然后，根据用户从下拉菜单中的选择，下面的某些链接应将其颜色更改为蓝色，并应变为可单击状态，而另一些链接应保持不可单击状态并显示为灰色。
我们之所以需要这样做，是因为链接指向资源，并且并非所有资源都可用于下拉菜单中的所有选项。
我没有Javascript / JQuery的经验，所以我知道如何应用样式，但没有条件。
.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>
使用jQuery并执行以下操作：
$('.select-box').on('change', function() {
$('.link').attr('disabled','disabled');
$('.link.' + $(this).val()).removeAttr('disabled');
});
然后在每个链接上放置适当的类，如下所示：
<a href="whatever" class="link option1" disabled>whatever</a>
为所有锚标记设置禁用属性，然后根据您的下拉选择删除该属性
<a href="resource1.html" id="res1">
<div class="resource-link">
Link to Resource 1
</div>
</a>
$('.select-box').change(function(){
$('#res1,#res2...').removeAttr('disabled');
});
你可以用这样的东西
$("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":
.....
}
});
您可以将链接的pointer-events默认设置为none （因此它们被禁用），然后监视select的change事件，以在链接的父元素上触发.active类，并有条件地更改pointer-events ， color和您还可以从选择列表中选择所需选项。
由于您的HTML损坏，我将您的示例减少到2个项目。 您需要添加li将ul a链接包装起来。
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>
更改字体粗细，但是您可以根据需要调整代码。 我不清楚您到底想要什么。 您没有提供任何所需的样式，应将其应用于选定的项目。
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>
如何使用JavaScript使用下拉菜单（带有外部链接）来禁用/启用按钮？
[英]How to disable/enable a button depending on a dropdown selection (with external links) using javascript?
如何根据用户所做的选择将只读下拉列表/文本框更改为读/写？
[英]How can I change read only dropdowns/text boxes to read/write depending on selection made by user?
尝试根据用户从下拉菜单中选择的内容更改 SQL 请求
[英]Trying to change a SQL Request depending on what the user has selected from a dropdown menu
如何基于下拉选择禁用/启用动态表中的复选框
[英]How to disable/enable checkboxes in dynamic table based on dropdown selection
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.