Question

我有一个简单的jQuery脚本，它从静态下拉列表中选择当前页面，当选择更改时，脚本还会修改锚标记的href属性以反映导航更改。这是我的代码：

<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>

我希望看到的唯一改进是，当用户从下拉列表中选择不同的页面时，页面会自动更改（'自动点击'锚标记）。

提前致谢！

Answer 1

如果我理解你的问题，你问的是如何自动重定向到给定的网址，而不是需要点击？

使用Javascript，您只需使用window.location属性重定向浏览器即可。

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

这将绕过任何按钮点击等的需要。只需将位置设置为下拉列表中选择的任何值。

Answer 2

这是我认为你想要做的更轻薄的版本：

<!DOCTYPE html>
<html lang"en">
<head>
    <title>Select Me</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

        $(function () {

            var cPage = 'Roofing';

            $("#PageSelectDropDown > option[value=" + cPage + "]").attr("selected", "selected");

            $("#PageSelectDropDown").change(function () {
                window.location.href = "/Product/" + $("#PageSelectDropDown option:selected").attr('value');
            });
        });

    </script>
</head>
<body>
    <div>

        <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> 

    </div>
</body>
</html>

Answer 3

试试window.location.replace()。它会自动重定向到页面。

使用jQuery从DropDownList更改页面

3 个答案: