[英]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.