Passing dropdown selected value as query string to URL

Question

On select event of a HTML dropdown value, I want to trigger being directed to a certain URL and that selected value being appended to the URL as query string. How to achieve that in javascript or jquery?

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

So if Dyer is selected, the result should be being directed to http://mysite.com/events.aspx?hosp=Dyer

Can someone help?

gotofritz · Accepted Answer · 2015-03-04 00:28:29Z

3

in jquery

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

EDIT: changed "bind" to the more modern "on"

edited Mar 4, 2015 at 0:28

answered Dec 28, 2011 at 18:34

gotofritz

3,3912 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gotofritz Over a year ago

Thanks, you won't mind a little upvote then, trying to get some rep around here :-)

gotofritz Over a year ago

@Alex that was an old answer, these days I'd use .on instead of .bind

nachito · Accepted Answer · 2011-12-28 18:38:13Z

1

If you're using the latest version of jQuery, you can attach an event handler using the on() function.

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

To see this in action: http://jsfiddle.net/73PEg/

answered Dec 28, 2011 at 18:38

nachito

7,0352 gold badges28 silver badges44 bronze badges

3 Comments

ryanulit Over a year ago

Out of curiosity, what is the advantage to using .on vs just $('#hospitalDropDown').change() ?

nachito Over a year ago

.change(), which is a shortcut for .bind('change') only attaches to currently loaded DOM elements. From the documentation: "The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live()."

Anju Thapa Over a year ago

thank you for taking time to answer my question, I used the first answer though.

Collectives™ on Stack Overflow

Passing dropdown selected value as query string to URL

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related