将下拉选择的值作为查询字符串传递给 URL答案

【问题标题】：Passing dropdown selected value as query string to URL将下拉选择的值作为查询字符串传递给 URL
【发布时间】：2011-12-28 18:32:24
【问题描述】：

在 HTML 下拉值的选择事件中，我想触发被定向到某个 URL，并将该选定值作为查询字符串附加到 URL。如何在 javascript 或 jquery 中实现？

<select id="hospitalDropDown">
            <option>All Hospitals</option>
            <option>Dyer</option>
        <option>Carmel</option>
        <option>Indianapolis</option>
        <option>Beech Grove</option>
</select>

所以如果选择了 Dyer，结果应该被定向到http://mysite.com/events.aspx?hosp=Dyer

有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery url drop-down-menu selected

【解决方案1】：

在 jquery 中

$( '#hospitalDropDown' ).on( 'change', function( e ){
  document.location.href = "http://blah" + $( this ).val();
});

编辑：将“bind”更改为更现代的“on”

【讨论】：

谢谢，那么你不会介意一点点赞，试着在这里获得一些代表:-)
@Alex 这是一个旧答案，这些天我会使用 .on 而不是 .bind

【解决方案2】：

如果您使用的是最新版本的 jQuery，您可以使用 on() function 附加事件处理程序。

$('#hospitalDropDown').on('change', function () {
    window.location.assign('http://mysite.com/events.aspx?hosp=' + $(this).val());
});

查看实际情况：http://jsfiddle.net/73PEg/

【讨论】：

出于好奇，使用 .on 与仅使用 $('#hospitalDropDown').change() 有什么优势？
.change()，它是 .bind('change') 的快捷方式，仅附加到当前加载的 DOM 元素。来自文档：“.on() 方法将事件处理程序附加到 jQuery 对象中当前选定的元素集。从 jQuery 1.7 开始，.on() 方法提供了附加事件处理程序所需的所有功能。帮助转换来自旧的 jQuery 事件方法，请参阅 .bind()、.delegate() 和 .live()。"
感谢您花时间回答我的问题，不过我使用了第一个答案。