Question

I have a simple jQuery script that selects the current page from a static dropdownlist, and when the selection changes the script also modifies the href attribute of an anchor tag to reflect the navigation change. Here is my code:

<select name="PageSelectDropDown" id="PageSelectDropDown"> 
    <option value="Insulation">Insulation</option> 
    <option value="Windows">Windows</option> 
    <option value="Siding">Siding</option> 
    <option value="Roofing">Roofing</option> 
    <option value="Gutters">Gutters &amp; Gutter Protection</option> 
    <option value="PatioDoors">Patio Doors</option>
</select> 
<a href="" id="clicker">Go!</a> 

<script type="text/javascript">
$(document).ready(function () {
    //get the current page
    var cPage = '<%= ViewData["CurrentPage"] %>';

    //select the current page from the list
    $("#PageSelectDropDown > option").each(function () {
        if ($(this).val().toLowerCase() == cPage.toLowerCase()) {
            $(this).attr("selected", "selected");
        }
    });

    //change the link target
    $("#PageSelectDropDown").change(function () {
        var str = "";
        $("#PageSelectDropDown option:selected").each(function () {
            str += $(this).val() + " ";
        });
        $("#clicker").attr("href", "/Product/" + str.trim());
        if (cPage != str.trim()) {
            $("#clicker").click();
        }
    });
});
</script>

The only improvement I would like to see on this is for page to automatically change (‘auto-click’ anchor tag) when the user selects a different page from the dropdownlist.

Thanks in advance!

Answer 1

If I understand your question correctly, you are asking how do you automatically redirect to the given url, instead of having a click needed?

With Javascript, you can simply use the window.location property to redirect the browser.

window.location = '/somepath/someurl.htm';

This will bypass any need for a button click, etc. Just set the location to whatever value is selected in the dropdown.