Javascript 使用下拉列表动态更改href属性的问题

我试图使用JavaScript创建一个链接，该链接基于用户输入的两个下拉列表。它可以工作，但是当用户返回任一下拉列表更改数据时会出现问题-它再次运行脚本，链接变成类似href=report\u dayGU.phpJW.php的内容，而不是所需的href=report\u dayGU.php。如果有人能帮助解决这个问题，我们将不胜感激

HTML:

---

最好在每次更改select值时构建href，如下所示

检查演示-

为什么不让它像：

var span = document.getElementById('reportSpans');
span.onchange = function() {
  document.getElementById("report").href = "report" + document.getElementById('reportSpans') + document.getElementById('reportAircraft').value + '.php' ;
}

var ac = document.getElementById('reportAircraft');
ac.onchange = function() {
  document.getElementById("report").href = "report" + document.getElementById('reportSpans') + document.getElementById('reportAircraft').value + '.php' ;
}

完成后，请检查以下内容：

我已发出警报以显示当前href值

var span = document.getElementById('reportSpans');
var baseURL;

span.onchange = function() {
baseURL = "report" + this.value;
document.getElementById("report").href = baseURL;
}

var ac = document.getElementById('reportAircraft');
ac.onchange = function() {
document.getElementById("report").href = baseURL + this.value + ".php";
alert(document.getElementById("report").href);
}

---

将报告超链接的生成移动到一个单独的函数，该函数由对任一选择框的更改调用

示例代码为：

var span=document.getElementById'reportspan'； span.onchange=generateLink； var ac=document.getElementById'ReportAircrafter'； ac.onchange=发电机LK； 函数生成器{ var spanValue=document.getelementbyidreportspan.value； var aircraftValue=document.getElementByIdreportAircraft.value； var reportLink=spanValue！=&&aircraftValue！=？报告+spanValue+aircraftValue+.php:； window.alertreportLink document.getElementByIdreport.href=reportLink； } 选择报告范围： 选择 今天 本周 这个月 所有记录 选择飞机： 选择 顾 JW 不 SD

---

尝试将倒数第二行替换为：document.getElementByIdreport.href=report+document.getElementById'reportspan.value+this.value+php；在从第二个下拉列表中选择值之前，您应该保留href的上一个值。请注意，您的解决方案有一个问题-无论何时您从第一个选择中选择一个值，它都会从链接的href中删除第二个选择的值-请在此处查看。我不会否决你的答案，因为你是这里的新手。你好，尼古拉，谢谢你对我的好意：。但是，我不认为这是错误的。我的想法是，当我们选择第一个下拉列表时，我们在href中设置了一个控制器，可以是更广泛的报告或报告列表。即使在没有设置第一个下拉列表的情况下单击报告链接，它也可以工作。这里不比较解决方案，但如果我们使用相同的函数生成URL，我们会在单击第一个下拉菜单后使用扩展名.php生成一个格式错误的URL。实际上，如果第一个下拉菜单只是部分构建URL，而该URL无法独立运行，只有在选择第二个下拉列表后才应设置href。此解决方案似乎不正确，因为它从第二个下拉列表中获取值，即使未单击该值。执行此测试时，单击第一个下拉列表，然后单击链接，而不选择第二个自上而下。我不能投反对票，因为我是新来的，但是我对所选答案投-1。@JVM如果我看到你是正确的，我将更改所选答案。谢谢你强调这个问题。

var span = document.getElementById('reportSpans');
span.onchange = _updateUrl;

var ac = document.getElementById('reportAircraft');
ac.onchange = _updateUrl;

function _updateUrl() {
    var href = "report" + document.getElementById("reportSpans").value 
       + document.getElementById("reportAircraft").value
       + ".php"; 
  document.getElementById("report").href = href;
}

var span = document.getElementById('reportSpans');
span.onchange = function() {
  document.getElementById("report").href = "report" + document.getElementById('reportSpans') + document.getElementById('reportAircraft').value + '.php' ;
}

var ac = document.getElementById('reportAircraft');
ac.onchange = function() {
  document.getElementById("report").href = "report" + document.getElementById('reportSpans') + document.getElementById('reportAircraft').value + '.php' ;
}

https://jsfiddle.net/n8b7j78m/3/

var span = document.getElementById('reportSpans');
var baseURL;

span.onchange = function() {
baseURL = "report" + this.value;
document.getElementById("report").href = baseURL;
}

var ac = document.getElementById('reportAircraft');
ac.onchange = function() {
document.getElementById("report").href = baseURL + this.value + ".php";
alert(document.getElementById("report").href);
}