單擊選擇選項時更改iframe src的查詢字符串

我在站點上有幾個下拉框，我需要根據用戶選擇的內容添加/添加/刪除查詢字符串。我怎樣才能做到這一點？下面是用於演示目的一些通用代碼：單擊選擇選項時更改iframe src的查詢字符串

<select name="status" onchange="document.getElementById('Iframe2').src = document.getElementById('Iframe2').src + this.options[this.selectedIndex].value"> 
<option></option> 
<option value="&A=1">1</option> 
<option value="&A=2">2</option> 
</select> 


<select name="plan" onchange="document.getElementById('Iframe2').src = document.getElementById('Iframe2').src + this.options[this.selectedIndex].value"> 
<option></option> 
<option value="&FilterGarage=Right">Right</option> 
<option value="&FilterGarage=Left">Left</option> 
</select>

所以我想發生什麼，讓我們說，用戶選擇「1」選項，然後在「右」選項。我現在擁有它的方式，它工作正常。當用戶返回並將「右」選項更改爲「左」時，會發生問題。在那一刻發生的事情是它只是增加另一個& FilterGarage參數，並最終沒有顯示任何東西。

我想我需要知道的是如何刪除選項值並重新生成它取決於用戶每次選擇什麼。

來源

2014-01-17 Larinx

您可以通過純JavaScript實現此目的。只需將id添加到您的<select>元素即可。

<select name="status" id="status">

和

<select name="plan" id="plan">

並添加JavaScript的HTML處的<body>結束。

<script type="text/javascript"> 
function set_url(){ 
    status = document.getElementById("status").value; 
    plan = document.getElementById("plan").value; 
    s = url + status + plan; 
    //alert(s); 
    document.getElementById("Iframe2").src = s; 
} 
url = "http://www.google.com/search?q=JavaScript"; 
document.getElementById("status").onchange = set_url; 
document.getElementById("plan").onchange = set_url; 
</script>

注意：基本URL應存儲在變量中;如上面例子中的url。

來源

2014-01-17 03:48:35

因此，我會從select語句中刪除onchange事件，因爲它們在腳本中？ – Larinx

是的，您可以刪除HTML元素中的'onchange'屬性。 –

不知道我在做什麼錯。無論何時我選擇一個選項，它都會將我帶回基本URL。 – Larinx

捕獲組合的更改事件，然後根據所選值更改鏈接href。第一次，你保存base_href，以避免每次計算它。每次將更改後的值保存到var並將兩個變量添加到url中。

var base_href="",status="",plan=""; 
$('#plan').on('change', function() { 
    plan=$(this).val(); 
    if (base_href=="") 
     base_href = $("#Iframe2").attr("src"); 
    $("#Iframe2").attr("src",base_href+plan+status); 
}); 
$('#status').on('change', function() { 
    status=$(this).val(); 
    if (base_href=="") 
     base_href = $("#Iframe2").attr("src"); 
    $("#Iframe2").attr("src",base_href+plan+status); 
});

我用jQuery做它（IM與我的手機寫作，它更少的代碼編寫），但如果你不想使用jQuery的唯一的薄，變化的是功能名稱。這個想法是一樣的！

來源

2014-01-17 03:28:44

單擊選擇選項時更改iframe src的查詢字符串

回答

相關問題