如何根据用户从选择下拉菜单中所做的选择来启用/禁用和更改某些链接的颜色

问题描述 投票：0回答：5

你好。 任何帮助将不胜感激！.

我有一个 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>

javascript jquery html css drop-down-menu
5个回答
1
投票

使用 jQuery 并执行如下操作：

$('.select-box').on('change', function() {
    $('.link').attr('disabled','disabled');
    $('.link.' + $(this).val()).removeAttr('disabled');
});

然后在每个链接上放置适当的类，如下所示：

<a href="whatever" class="link option1" disabled>whatever</a>
0
投票

您可以将链接的 

pointer-events
默认设置为 
none
（因此它们被禁用），然后监视 select 的 
change
事件以触发链接父元素上的 
.active
类并有条件地更改
pointer-events
和 
color
以及您想要从选择列表中选择的选项的任何其他内容。

我已将您的示例减少到 2 个项目，因为您破坏了 HTML。您需要添加 

li
将 
a
链接包装在 
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>

0
投票

为所有锚标记设置禁用属性，然后根据您的下拉选择删除该属性

<a href="resource1.html" id="res1">
                <div class="resource-link">
                    Link to Resource 1
                </div>
            </a>

    $('.select-box').change(function(){
    $('#res1,#res2...').removeAttr('disabled');
    });
0
投票

你可以使用这样的东西

$("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":
            .....

    }
});
0
投票

更改字体粗细，但您可以根据需要调整代码。我不清楚你到底想要什么。您没有提供任何所需的样式，应将其应用于所选项目。

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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.