CODEWITHSUNDEEP
javascripthtmlonchangedrop-down-menu
Nate
Nate

Reputation: 28354

Simplest way to make select box reload the page with a variable in the URL?

I've read some Q&As on here on the same subject, but most of them seem kind of complicated and tended to use jQuery. Since I don't know how to use jQuery, and am looking for a simple solution, hopefully I won't get flamed for opening another question on this topic :-)

I have a select box on a page similar to the following:

<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>

When a new option is selected, I would like the current page to be re-loaded, but with a variable specifying the selected option appended to the URL.

What would be the simplest, non-jQuery, method to do this effectively?

Upvotes: 1

Views: 542

Answers (1)

John Girata
John Girata

Reputation: 2091

If I understand correctly, I think something like this will work:

<form>
    <select name="my_select" onchange="submit()">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</form>

action="#" will reload the current page and method="get" specifies to put the select's value in the URL. onchange="submit()" tells the form to submit whenever the select's value changes.

If you are on page foo.html, changing the value will load foo.html?my_select=Option+3#.

If you have other parameters in the URL, this will not preserve them. That is, if you are on foo.html?a=1 and change the value, the new page will still be foo.html?my_select=Option+3#.

Upvotes: 3

Related Questions