Question

我想在jQuery中显示多个下拉选择的值。我能够使用html下拉选项实现这一点。如何实现asp下拉框。同样的事情是为html选择。

                                  <div class="col-md-4">
                                        <div class="form-group form-group-sm">
                                            <label class="col-sm-4 control-label">Project Approved By:</label>
                                            <div class="col-sm-8">
                                                <asp:DropDownList ID="ddlApprovedby" CssClass="dropdownlist" class="country" runat="server">
                                                    <asp:ListItem>--Select Approver--</asp:ListItem>
                                                    <asp:ListItem>SHLCC</asp:ListItem>
                                                    <asp:ListItem>SLSWCC</asp:ListItem>
                                                    <asp:ListItem>DLSWCC</asp:ListItem>
                                                </asp:DropDownList>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group form-group-sm">
                                            <label class="col-sm-4 control-label">Reservation:</label>
                                            <div class="col-sm-8">
                                                <asp:DropDownList ID="ddlreservation" CssClass="dropdownlist" class="country" runat="server">
                                                    <asp:ListItem>--Select Reservation--</asp:ListItem>
                                                    <asp:ListItem>General</asp:ListItem>
                                                    <asp:ListItem>SC/ST</asp:ListItem>
                                                    <asp:ListItem>Women</asp:ListItem>
                                                    <asp:ListItem>Physically Challenged</asp:ListItem>
                                                    <asp:ListItem>Minorities</asp:ListItem>
                                                    <asp:ListItem>OBC</asp:ListItem>
                                                </asp:DropDownList>

                                            </div>
                                        </div>
                                    </div>

和我的jQuery是

var countries = [];


        $.each($(".country option:selected"), function () {
            countries.push($(this).val());


        });


    alert("You have selectetions are " + countries.join(", "));

我选择html的工作小提取 http://jsfiddle.net/induuu/wL2h9k1m/

Answer 1

您需要使用

     <div>
    <asp:Button ID="btnModal" runat="server" ClientIDMode="Static" Text="Click me to get value"  />
    </div>
    <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" ClientIDMode="Static">
                 <asp:ListItem>--Select Approver--</asp:ListItem>
                 <asp:ListItem>SHLCC</asp:ListItem>
                 <asp:ListItem>SLSWCC</asp:ListItem>
                 <asp:ListItem>DLSWCC</asp:ListItem>
   </asp:ListBox>

和jQuery

<script>
        $(function () {
            $('#btnModal').on('click', function (e) {
                e.preventDefault();

                var listBoxValues = $('#ListBox1').val();//return []
                console.log(listBoxValues);
            });
        });
    </script>

为了您的信息，您可以使用select2进行多项选择

Answer 2

这就是你想要的......玩具在dropdwon列表中有两个类..删除一个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $('#Button1').on('click', function (e) {
                e.preventDefault();
                var ddl1 = $('#ddlApprovedby').val();
                var ddl2 = $('#ddlreservation').val();
                alert("You have selected the country - " + ddl1 + '->' + ddl2);
            });
            $('#Button2').on('click', function (e) {
                e.preventDefault();
                var countries = [];
                $.each($(".country option:selected"), function () {
                    countries.push($(this).val());
                });
                alert("You have selected the country - " + countries.join(", "));
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <div class="col-md-4">
                                        <div class="form-group form-group-sm">
                                            <label class="col-sm-4 control-label">Project Approved By:</label>
                                            <div class="col-sm-8">
                                                <asp:DropDownList ID="ddlApprovedby"  class="country" runat="server" ClientIDMode="Static">
                                                    <asp:ListItem>--Select Approver--</asp:ListItem>
                                                    <asp:ListItem>SHLCC</asp:ListItem>
                                                    <asp:ListItem>SLSWCC</asp:ListItem>
                                                    <asp:ListItem>DLSWCC</asp:ListItem>
                                                </asp:DropDownList>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group form-group-sm">
                                            <label class="col-sm-4 control-label">Reservation:</label>
                                            <div class="col-sm-8">
                                                <asp:DropDownList ID="ddlreservation"  class="country" runat="server" ClientIDMode="Static">
                                                    <asp:ListItem>--Select Reservation--</asp:ListItem>
                                                    <asp:ListItem>General</asp:ListItem>
                                                    <asp:ListItem>SC/ST</asp:ListItem>
                                                    <asp:ListItem>Women</asp:ListItem>
                                                    <asp:ListItem>Physically Challenged</asp:ListItem>
                                                    <asp:ListItem>Minorities</asp:ListItem>
                                                    <asp:ListItem>OBC</asp:ListItem>
                                                </asp:DropDownList>

                                            </div>
                                        </div>
                                    </div>


    <asp:Button ID="Button1" runat="server" Text="Button" ClientIDMode="Static" />
    <asp:Button ID="Button2" runat="server" Text="Button2" ClientIDMode="Static" />

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

如何使用jQuery从多个Asp.net DropDown值中选择多个值

2 个答案: