在列表框中设置选中值的限制

本文关键字:设置 列表 | 更新日期: 2023-09-27 18:05:57

我有多个选择列表框,我想限制用户当他选择超过3个值。这些值可以是国家或城市,它们来自数据库。相同的代码写在lstArea_SelectedIndexChanged方法中。

<asp:ListBox ID="lstArea" runat="server" SelectionMode="Multiple" OnSelectedIndexChanged="lstArea_SelectedIndexChanged" AutoPostBack="true"></asp:ListBox>

我发现jquery代码来验证相同,但更改功能不起作用。

    var limit = 3;
    $("#<%=lstArea.ClientID%>").change(function () {
        if ($(this).siblings(':checked').length >= limit) {
            this.checked = false;
        }
    });

在列表框中设置选中值的限制

我想这个地址可以帮到你
https://stackoverflow.com/a/27490795/5631805也许你应该用

 if ($(this).siblings(':checked').length >= limit)

if($('#lstArea:checked').length >= limit)

因为您已经将属性AutoPostBack设置为true,并且您还设置了OnSelectedIndexChanged事件处理程序,. net将为您的选择生成onchange属性,这将触发POST返回到服务器,每当一个项目将被选中时。为了避免这种情况,你需要将。net代码修改为:

<asp:ListBox ID="lstArea" runat="server" SelectionMode="Multiple"/>

和更新你的javascript代码如下:

// Handle for the list
var list = $("#<%=lstArea.ClientID%>");
// Our limit
var limit = 3;
// Get currently selected values
var selected = list.val();
// Handle change event
list.change(function () {
    // If we reached the limit
    if (list.find(":checked").length >= limit) {
        // Set the list value back to the previous ones
        list.val(selected);
        return;
    }
    // Postback to the server
    setTimeout("__doPostBack('<%=lstArea.ClientID%>','')", 0);
});

每次渲染页面时,selected变量将保存最后选择的项。在change处理程序中,您将获得所有选中/选中的选项,当新选择的选项的计数大于或等于您的限制时,您将通过设置所有先前的值来取消选择最后选择的值。如果限制是ok的,您将通过调用。net函数__doPostBack来进行回发。