How to change the url based on a Drop Down List?

Question

I am using a Drop Down List for selecting some options. Everything works fine, all I need is to change the name in the URL. Is there a way to change the URL ONLY based on the option?

Default Puma -

Default.aspx?Dept=Shoes&Type=Puma

if Nike is selected -

Default.aspx?Dept=Shoes&Type=Nike

Answer 1

To handle this on the server you could enable the autopostback property of the control and create a SelectedIndexChanged event to call a method to identify the selected option and redirect based on this selection.

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    Response.Redirect(string.Format("Default.aspx?Dept=Shoes&Type={0}", this.DropDownList1.SelectedValue), true);
}

Answer 2

More specifically

<select onchange="window.location.href=this.options[this.selectedIndex].value;">
  <option value="#">--  Select a Search Engine ---</option>
  <option value="http://www.live.com">Live Search</option>
  <option value="http://www.google.com">Google</option>
</select>

Answer 3

You are going to want to do this with Javascript. You can change window.location from Javascript and it will redirect you to whatever you changed it to.

Here is an unobtrusive way of doing it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>test</title>
    </head>
    <body>
        <select id="dd">
            <option value="http://example.com/first">first</option>
            <option value="http://example.com/second">second</option>
        </select>
        <script type="text/javascript">
            if (dd = document.getElementById("dd")) {   
                dd.onchange = function() {
                    window.location = dd.options[dd.selectedIndex].value;
                }
            }
        </script>
    </body>
</html>