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

Question

我正在尝试使用基于用户对两个下拉菜单的输入的 JavaScript 创建链接。它有效，但是当用户返回更改任一下拉列表中的数据时会出现问题 - 它再次运行脚本并且链接变成类似 href="report_dayGU.phpJW.php" 而不是所需的 href="report_dayGU.php"。如果有人可以帮助解决此问题，我们将不胜感激。

HTML:

<div class="dropdown-spans">
  <label for="reportSpans">Select Report Span:</label>
  <select id="reportSpans" name="reportSpans">
    <option value="#">Select</option>
    <option value="_day">Today</option>
    <option value="_week">This Week</option>
    <option value="_month">This Month</option>
    <option value="_all">All Records</option>
  </select>
</div>

<br>

<div class="dropdown-aircraft">
  <label for="reportAircraft">Select Aircraft:</label>
  <select id="reportAircraft" name="reportAircraft">
    <option value="#">Select</option>
    <option value="GU">GU</option>
    <option value="JW">JW</option>
    <option value="NO">NO</option>
    <option value="SD">SD</option>
  </select>
</div>

<br>

<div class="button-produce">
  <a id="report" href="#">Produce Report</a>
</div>

JavaScript:

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

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

JSFiddle

Answer 1

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

示例代码是:

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

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

function generateLink () {
	 var spanValue = document.getElementById("reportSpans").value;
   var aircraftValue = document.getElementById("reportAircraft").value;
   var reportLink = (spanValue != "#" && aircraftValue != "#")?("report" + spanValue + aircraftValue + ".php"):"#";

	 window.alert(reportLink)
   document.getElementById("report").href = reportLink;
}

<div class="dropdown-spans">
  <label for="reportSpans">Select Report Span:</label>
  <select id="reportSpans" name="reportSpans">
    <option value="#">Select</option>
    <option value="_day">Today</option>
    <option value="_week">This Week</option>
    <option value="_month">This Month</option>
    <option value="_all">All Records</option>
  </select>
</div>

<br>

<div class="dropdown-aircraft">
  <label for="reportAircraft">Select Aircraft:</label>
  <select id="reportAircraft" name="reportAircraft">
    <option value="#">Select</option>
    <option value="GU">GU</option>
    <option value="JW">JW</option>
    <option value="NO">NO</option>
    <option value="SD">SD</option>
  </select>
</div>

<br>

<div class="button-produce">
  <a id="report" href="#">Produce Report</a>
</div>