下拉列表从另一个下拉列表中禁用所选值,反之亦然,以避免重复

时间:2016-07-17 03:21:54

标签: javascript asp.net vb.net

我有5个DropDownList。我需要禁用从前一个DropDownList中选择的值,这样我就可以避免重复下一个Dropdownlist。

我的问题是当我按下Save按钮时页面重新加载并且DropDownList重置并且我从数据库中保存的值来自5 DropdownList全部为0. JavaScript的功能是禁用所选值以避免重复,我假设我可能没有以正确的方式调用JavaScript。

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">

<title></title>
</head>
<body> 

<form id="form1" runat="server">
    <div>
        <asp:DropDownList ID = "ddlfirst" runat="server"                   
             OnSelectedIndexChanged = "OnSelectedIndexChanged"      
 AutoPostBack="True" >
            <asp:ListItem Value="0">0</asp:ListItem>
            <asp:ListItem Value="1">1</asp:ListItem>
            <asp:ListItem Value="2">2</asp:ListItem>
            <asp:ListItem Value="3">3</asp:ListItem>
            <asp:ListItem Value="4">4</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID = "ddlsecond" runat="server"             
             OnSelectedIndexChanged = "OnSelectedIndexChanged" AutoPostBack="True"  >
            <asp:ListItem Value="0">0</asp:ListItem>
            <asp:ListItem Value="1">1</asp:ListItem>
            <asp:ListItem Value="2">2</asp:ListItem>
            <asp:ListItem Value="3">3</asp:ListItem>
            <asp:ListItem Value="4">4</asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID = "ddlthird" runat="server"         
             OnSelectedIndexChanged = "OnSelectedIndexChanged" AutoPostBack="True" >
            <asp:ListItem Value="0">0</asp:ListItem>
            <asp:ListItem Value="1">1</asp:ListItem>
            <asp:ListItem Value="2">2</asp:ListItem>
            <asp:ListItem Value="3">3</asp:ListItem>
            <asp:ListItem Value="4">4</asp:ListItem>        
        </asp:DropDownList>
        <asp:DropDownList ID = "ddlfourth" runat="server"     
             OnSelectedIndexChanged = "OnSelectedIndexChanged" AutoPostBack="True" >
            <asp:ListItem Value="0">0</asp:ListItem>
            <asp:ListItem Value="1">1</asp:ListItem>
            <asp:ListItem Value="2">2</asp:ListItem>
            <asp:ListItem Value="3">3</asp:ListItem>
            <asp:ListItem Value="4">4</asp:ListItem> 
        </asp:DropDownList>
        <asp:DropDownList ID = "ddlfifth" runat="server"     
             OnSelectedIndexChanged = "OnSelectedIndexChanged" AutoPostBack="True" >
            <asp:ListItem Value="0">0</asp:ListItem>
            <asp:ListItem Value="1">1</asp:ListItem>
            <asp:ListItem Value="2">2</asp:ListItem>
            <asp:ListItem Value="3">3</asp:ListItem>
            <asp:ListItem Value="4">4</asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="btnSave" runat="server" Text="Save"    
             OnClick="btnSave_Click" />
        <asp:Label ID="lblmsg" runat="server"></asp:Label>
    </div>
</form>

<script  type="text/javascript">
    var ids = ['ddlfirst', 'ddlsecond', 'ddlthird', 'ddlfourth', 'ddlfifth'];
    //put id names in list above of select elements that you want to have effect.
    NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;
    var selected = [];
    ids = makeid(ids);
    var opts = find(ids);
    updateS(opts);
    massdisabler(opts);
    assignFunc(ids, disabler);

    function assignFunc(i, func) { //done
        var x;
        for (x = 0; x < i.length; ++x) {
            i[x].onchange = function () {
                func(this);
            };
        }
    }

    function disabler(i) {
        console.log(selected);
        updateS(opts);
        massdisabler(opts);
    }

    function makeid(i) { //done
        var o = [];
        i.forEach(function (v) {
            o.push(document.getElementById(v))
        });
        return o;
    }

    function find(ids) { //done
        var o = {};
        for (var i = 0; i < ids.length; ++i) {
            o[i] = {};
            ids[i].children.forEach(function (v, n) {
                o[i][n] = v;
            });
        }

        return o;
    }

    function massdisabler(op) { //done
        var y = Object.keys(op).length;
        for (var x = 0; x < y; x++) {
            var t = 0,
                l = Object.keys(opts[x]).length;
            for (var v = 0; v < l; v++) {
                t = op[x][v];

                if (selected.some(function (k) {
                    if (t.value == k) {
                        return true;
                }
                })) {
                    t.setAttribute("disabled", "disabled");
                } else {
                    t.removeAttribute("disabled");
                }
            }
        }
    }

    function updateS(op) { //done
        var s = [],
            y = Object.keys(op).length;

        for (var x = 0; x < y; x++) {

            var t = 0,
                l = Object.keys(opts[x]).length;

            for (var v = 0; v < l; v++) {
                t = op[x][v];
                var yn = s.some(function (k) {
                    if (t.value == k) {
                        return true;
                    }
                });
                if (t.selected && (!yn)) s.push(t.value);
            }
        }
        selected = s;
    }
 </script>    
 </body>
 </html>

这是整个.aspx JavaScript .vb代码。

这是Save Button .vb代码

背后的代码
Protected Sub btnSave_Click(sender As Object, e As EventArgs)
    Dim cs As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim cn As SqlConnection = New SqlConnection(cs)
    Dim cmd As SqlCommand = New SqlCommand()
    cmd.Connection = cn
    cmd.CommandType = CommandType.Text
    cmd.CommandText = "insert into Names values(@SurveyName,@SurveyNames,@SurveyNamet,@SurveyNamev,@SurveyNamex)"
    cmd.Parameters.Clear()

    cmd.Parameters.AddWithValue("@SurveyName", ddlfirst.SelectedItem.Value)
    cmd.Parameters.AddWithValue("@SurveyNames", ddlsecond.SelectedItem.Value)
    cmd.Parameters.AddWithValue("@SurveyNamet", ddlthird.SelectedItem.Value)
    cmd.Parameters.AddWithValue("@SurveyNamev", ddlfourth.SelectedItem.Value)
    cmd.Parameters.AddWithValue("@SurveyNamex", ddlfifth.SelectedItem.Value)
    If cn.State = ConnectionState.Closed Then
        cn.Open()
    End If
    cmd.ExecuteNonQuery()
    cn.Close()
    lblmsg.Text = "Data entered successfully!!!"
End Sub

0 个答案:

没有答案