使用下拉列表作为查询字符串答案

【问题标题】：Use drop down list as query string使用下拉列表作为查询字符串
【发布时间】：2012-03-28 19:08:14
【问题描述】：

我在表单中有一个下拉列表

<form id="myForm">
    <select>
        <option>ABC</option>
        <option>xyz</option>
    </select>
</form>

当点击一个项目时，我希望用户被引导到一个新页面（即'newPage.aspx'），这个页面将显示选择的选项，例如在标签内（Label1）

我还有 2 个选项存储在一个数组中 -> myArray = new Array("ABC", "xyz")，如果有帮助的话

【问题讨论】：

为什么不在每个选项中放置一个锚点，并带有指向页面的href？
What have you tried?
这样做有问题吗？

标签： javascript html drop-down-menu query-string

【解决方案1】：

jQuery 它：

  $('select','#myForm').change(function() {
    document.location.href = "/newPage.aspx?value=" + $(this).val();
  });

更好的解决方案（提交表单，对搜索引擎更友好）是：

HTML：

<form id="myForm" method="get" action="newPage.aspx">
  <select name="mySelect">
    <option value="ABC">ABC</option>
    <option value="xyz">xyz</option>
  </select>
</form>

javascript：

  $('select','#myForm').change(function() {
     $('#myForm').submit();
  });

【讨论】：

【解决方案2】：

使您的下拉列表成为 ASP.NET 服务器控件（因为您使用的是 aspx）
在您的代码隐藏中，从下拉列表中获取所选值
在您的代码隐藏中，Response.Redirect 到 URL (newpage.aspx?value=ABC)

【讨论】：

【解决方案3】：

目前未经测试，但我认为这应该可行：

var sel = document.getElementById('myForm').getElementsByTagName('select')[0];

sel.onchange() = function(){
    var val = this.getElementsByTagName('option')[this.selectedIndex],
        url = 'http://newPage.aspx?option=',
        queryUrl = url + encodeURIComponent(val);

    window.location = queryUrl;
});

参考资料：

【讨论】：