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

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

检查演示 - Fiddle Demo

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 2

将报告超链接的生成移动到单独的函数，通过更改选择框调用。

示例代码是：

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 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：

context.startActivity(i);

我已发出警告以显示当前的href值。

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

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

4 个答案: