創建基於從下拉菜單

Question

選擇哪一選項查詢字符串我有這個下拉菜單：

<select name="Filter" onchange="applyFilter(this);"> 
<option name="Item1" id=Item1 value="10.5">Test1</option> 
<option name="Item2" id=Item2 value="27">Test2</option> 
<option name="Item3" id=Item3 value="31">Test3</option> 
</select> 

我還在學習JavaScript和想寫生成/加載查詢字符串的函數URL並將所選項目的值作爲參數傳遞。下拉菜單中的每個選項都需要有自己的ID。這是我到目前爲止的代碼：

<script language="javascript1.2" type="text/javascript"> 
function applyFilter() 
{ 
var currentQS = ''; 
var currentObject; 
var currentURL = '' + window.location.href; 

currentQS = unescape(window.location.search); 
var newQS = ''; 

currentObject = document.getElementById('Item1'); 
newQS = $Querystring(newQS).set(currentObject.name,currentObject.value).toString(); 
newQS = newQS.substring(1,newQS.length); 

currentObject = document.getElementById('Item2'); 
newQS = $Querystring(newQS).set(currentObject.name,currentObject.value).toString(); 
newQS = newQS.substring(1,newQS.length); 

currentObject = document.getElementById('Item3'); 
newQS = $Querystring(newQS).set(currentObject.name,currentObject.value).toString(); 
newQS = newQS.substring(1,newQS.length); 

var newURL = 'http://' + location.hostname + location.pathname + '?' + newQS; 
window.location = newURL; 
} 
</script> 

任何幫助，這將不勝感激。

Answer 1

不知道什麼$Querystring指，但你應該能夠做到這樣的：

document.getElementsByName('Filter')[0].addEventListener('change', function() { 
    window.location = 'http://' + location.hostname + location.pathname + '?' + this.name + '=' + this.options[this.selectedIndex].value; 
}); 

然而，選擇菜單可能不是你想要做什麼是最好的選擇。看看這篇博文：http://uxmovement.com/forms/stop-misusing-select-menus/