传递下拉菜单选择的值作为查询字符串URL

问题描述：

在一个HTML下拉值的选择时，我想要触发被定向到一个特定的URL和选择价值被附加到URL作为查询字符串。如何在JavaScript或jQuery中实现？传递下拉菜单选择的值作为查询字符串URL

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

所以如果选择代尔，结果应被引导到http://mysite.com/events.aspx?hosp=Dyer

有人能帮忙吗？

答

jQuery中

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

编辑：改变“绑定”到现代“的”

谢谢你，这是完美的！ – 2011-12-28 18:48:59

谢谢，你不会介意一点点upvote然后，试图在这里得到一些代表:-) – gotofritz 2011-12-28 18:52:29

非常有用的谢谢你！ +1 – Alex 2015-03-03 20:53:14

答

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

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

要看到这个动作：http://jsfiddle.net/73PEg/

值得关注的。对只因为jQuery的1.7 – gotofritz 2011-12-28 18:42:11

工作出于好奇，使用.on vs $（'＃hospitalDropDown'）。change（）？有什么好处？ – ryanulit 2011-12-28 18:46:35

.change（）是.bind（'change'）的快捷方式，它只附加到当前加载的DOM元素。从文档：“.on（）方法将事件处理程序附加到jQuery对象中当前选定的元素集。从jQuery 1.7开始，.on（）方法提供了附加事件处理程序所需的全部功能。从较老的jQuery事件方法，请参阅.bind（），.delegate（）和.live（）。“ – nachito 2011-12-28 18:50:17

传递下拉菜单选择的值作为查询字符串URL

相关推荐