[英]Creating a querystring based on what option is selected from a drop down menu
I have this drop down menu: 我有这个下拉菜单:
<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>
I'm still learning javascript and am trying to write a function that generates/loads the querystring URL and pass the value of the selected item as a parameter. 我仍在学习JavaScript,并尝试编写一个函数来生成/加载查询字符串URL,并将所选项目的值作为参数传递。 Each option in the drop down menu will need to have their own ID.
下拉菜单中的每个选项都需要具有自己的ID。 This is the code I have so far:
这是我到目前为止的代码:
<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>
Any help with this will is appreciated. 任何帮助,将不胜感激。
Not sure what $Querystring
refers to, but you should be able to do it like this: 不确定
$Querystring
指的是什么,但是您应该可以这样做:
document.getElementsByName('Filter')[0].addEventListener('change', function() {
window.location = 'http://' + location.hostname + location.pathname + '?' + this.name + '=' + this.options[this.selectedIndex].value;
});
However, a select menu might not be the best option for what you're trying to do. 但是,选择菜单可能不是您要执行的操作的最佳选择。 Take a look at this blog post: http://uxmovement.com/forms/stop-misusing-select-menus/
看看这篇博客文章: http : //uxmovement.com/forms/stop-misusing-select-menus/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.