使用jQuery根据复选框选项更改URL参数

时间:2013-07-02 20:30:10

标签: jquery asp.net href checkboxlist

我是jQuery的新手但我有一种情况需要从复选框列表中修改现有的锚标记参数。

所以我有一个

<a href="defatul.aspx?nOp=1&name=Jack&place=A">Link</a>

<asp:CheckBoxList ID="cbOptions" runat="server">
<asp:ListItem Value="A">Place A</asp:ListItem>
<asp:ListItem Value="B">Place B</asp:ListItem>
<asp:ListItem Value="C">Place C</asp:ListItem>
</asp:CheckBoxList>

我希望LINK的参数在用户选择复选框选项时动态更改。

因此,如果用户选择&#34;放置C&#34; href URL将更改为defatul.aspx?nOp = 1&amp; name = Jack&amp; place = C automatic。

我认为这可以在jQuery中完成。我已搜索但无法找到能够实现此目的的示例。

1 个答案:

答案 0 :(得分:1)

你走了:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
    $("#myselect").on("change", function() {
        var selectedValue = $(this).val();

        if (selectedValue == "A") {
            $("#mylink").attr("href", "default.aspx?sel=A");
        } else if (selectedValue == "B") {
            $("#mylink").attr("href", "default.aspx?sel=B");
        } else if (selectedValue == "C") {
            $("#mylink").attr("href", "default.aspx?sel=C");
        }
    });
});
</script>
<a id="mylink" href="default.aspx?nOp=1&name=Jack&place=A">Link</a>
<select id="myselect">
<option value="A">Place A</option>
<option value="B">Place B</option>
<option value="C">Place C</option>
</select>
</body>
</html>

还要添加一些解释...在文档完全加载时,将下拉列表的更改事件连接起来。在那种情况下,获取下拉列表的值,并根据您的需要更改超链接的href属性。希望这有助于你前进。

编辑:抱歉,您注意到需要一个复选框列表。我会很快调整。

编辑2:我不确定该示例是否适用于复选框,因为您可以选中多个复选框。如果您需要任何其他帮助,请与我们联系。