CODEWITHSUNDEEP
c#.netasp.net
MrM
MrM

Reputation: 21999

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

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

Upvotes: 0

Views: 3143

Answers (3)

Andy Rose
Andy Rose

Reputation: 16984

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);
}

Upvotes: 3

Andrew Hare
Andrew Hare

Reputation: 351526

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>

Upvotes: 0

bendewey
bendewey

Reputation: 40235

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>

Upvotes: 2

Related Questions