ドロップダウンを使用してhref属性を動的に変更する際の問題

Question

JavaScriptを使用して2つのドロップダウンの入力に基づいてリンクを作成しようとしています。ただし、ユーザーがいずれかのドロップダウンでデータを変更するために戻ったときに問題が発生します。スクリプトを再度実行すると、href="report_dayGU.php"の代わりにhref="report_dayGU.phpJW.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

レポートハイパーリンクの生成を、選択ボックスの変更によって呼び出される別の関数に移動します。

例のコードは次のとおりです。 `のdocument.getElementById（ "レポート"）のhref = "レポート" +のdocument.getElementById（ 'reportSpans'：

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

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

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

 
\t 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

あなたは以下のように選択値を変更する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 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); 
}