使用下拉菜单动态更改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>

Answer 2

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

检查演示-Fiddle演示

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;
}

Answer 3

为什么不像一样

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' ;
}

Answer 4

完成，检查这个jsfiddle:

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

我已发出警报以显示当前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);
}