使用 JavaScript 动态更新按钮链接的 href 属性

本文介绍了如何使用 JavaScript 动态更新按钮的 href 属性，使其根据下拉菜单选项的选择而改变。通过监听 元素的 onchange 事件，并在事件处理函数中获取选中的值，我们可以构造新的 URL 并将其赋给按钮的 href 属性，从而实现动态链接更新。

动态更新按钮链接的 href 属性

在 Web 开发中，有时我们需要根据用户的选择动态地改变页面上的链接。一个常见的场景是，根据下拉菜单的选择，改变按钮的链接目标。本文将介绍如何使用 JavaScript 来实现这一功能。

1. HTML 结构

首先，我们需要一个包含下拉菜单和按钮的 HTML 结构。

<div class="container">
<h1>Tactical Volume Forecaster</h1>
<p>Which unit are you forecasting for?</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
<select class="form-select" aria-label="Default select example" id="unit" onchange="changeLink()">
<option selected>...</option>
<option value="Sales">Sales</option>
<option value="Client_Service">Client Service</option>
<option value="Agency">Agency</option>
<option value="Experts">Experts</option>
</select><br/><br/>
<a href="https://www.php.cn/volume_forecaster/" class="btn btn-info" role="button" id="forecast_button">Get Forecast</a>
</div>

在这个结构中：

• 元素是一个下拉菜单，id 为 unit。
• onchange=”changeLink()” 属性指定了当下拉菜单的值发生改变时，将调用名为 changeLink() 的 JavaScript 函数。
• 元素是一个按钮，id 为 forecast_button，其 href 属性是我们希望动态更新的链接。

2. JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现动态更新链接的功能。

function changeLink() {
var selectedUnit = document.getElementById("unit").value;
var unitLink = "/volume_forecaster/result/" + selectedUnit;
document.getElementById("forecast_button").href = unitLink;
}

这段代码做了以下几件事：

• document.getElementById(“unit”).value 获取了下拉菜单中选中的 option 的 value 属性值，并将其存储在 selectedUnit 变量中。
• “/volume_forecaster/result/” + selectedUnit 使用选中的值构建新的 URL，并将其存储在 unitLink 变量中。
• document.getElementById(“forecast_button”).href = unitLink 将新的 URL 赋值给按钮的 href 属性，从而更新按钮的链接。

3. 完整示例

将 HTML 和 JavaScript 代码结合起来，就得到了一个完整的示例。

<div class="container">
<h1>Tactical Volume Forecaster</h1>
<p>Which unit are you forecasting for?</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
<select class="form-select" aria-label="Default select example" id="unit" onchange="changeLink()">
<option selected>...</option>
<option value="Sales">Sales</option>
<option value="Client_Service">Client Service</option>
<option value="Agency">Agency</option>
<option value="Experts">Experts</option>
</select><br/><br/>
<a href="https://www.php.cn/volume_forecaster/" class="btn btn-info" role="button" id="forecast_button">Get Forecast</a>
</div>
<script>
function changeLink() {
var selectedUnit = document.getElementById("unit").value;
var unitLink = "/volume_forecaster/result/" + selectedUnit;
document.getElementById("forecast_button").href = unitLink;
}
</script>

4. 注意事项

• 确保 JavaScript 代码在 HTML 元素加载完成后执行。可以将 <script> 标签放在 </script>