گرفتن متن و مقدار آیتم های انتخاب شده از ListBox در Asp.Net توسط jquery یا JavaScript

در این مقاله میخواهیم متن و مقدار از آیتم های انتخاب شده از یک listbox را بدست آوریم

گرفتن متن و مقدار آیتم های انتخاب شده از ListBox در Asp.Net توسط jquery یا JavaScript

ابتدا برنامه ویژوال استدیو خود را باز کنید ویک پروژه جدید از نوع وب فرم بسازید سپس یک صفحه جدید به پروژه خود اضافه کنید .

JavaScri[pt :

ابتدا از جعبه ابزار خود یک کنترل ListBox و یک دکمه به صفحه خود اضافه کنید زمانی که روی دکمه کلیک میشود تابع GetValues اجرا میشودپس در دکمه دریافت مقادیر رویداد OnClientClick نام تابع خود را وارد میکنیم

که در این تابع از یک حلقه روی آیتم ها استفاده شده که آیتم های انتخاب شده توسط جاوا اسکریپت نشان داده میشود:

    <asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode="Multiple">
        <asp:ListItem Text="ایمان" Value="1"></asp:ListItem>
        <asp:ListItem Text="سجاد" Value="2"></asp:ListItem>
        <asp:ListItem Text="مسعود" Value="3"></asp:ListItem>
        <asp:ListItem Text="احسان" Value="4"></asp:ListItem>
        <asp:ListItem Text="پاکان" Value="5"></asp:ListItem>
        <asp:ListItem Text="علی" Value="6"></asp:ListItem>
        <asp:ListItem Text="وحید" Value="7"></asp:ListItem>
    </asp:ListBox>
    <br />
    <hr />
    <asp:Button ID="btnGetValues" Text="Get values" runat="server" OnClientClick="return GetValues()" />
    <script type="text/javascript">
        function GetValues() {
            var values = "";
            var listBox = document.getElementById("<%= ListBox1.ClientID%>");
            for (var i = 0; i < listBox.options.length; i++) {
                if (listBox.options[i].selected) {
                    values += listBox.options[i].innerHTML + " " + listBox.options[i].value + "\n";
                }
            }
            alert(values);
            return false;
        }
    </script>

Jquery :

برای دکمه دریافت مقادیر توسط Jquery کلیک آنرا کنترل میکنیم:

    <asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode="Multiple">
        <asp:ListItem Text="ایمان" Value="1"></asp:ListItem>
        <asp:ListItem Text="سجاد" Value="2"></asp:ListItem>
        <asp:ListItem Text="مسعود" Value="3"></asp:ListItem>
        <asp:ListItem Text="احسان" Value="4"></asp:ListItem>
        <asp:ListItem Text="پاکان" Value="5"></asp:ListItem>
        <asp:ListItem Text="علی" Value="6"></asp:ListItem>
        <asp:ListItem Text="وحید" Value="7"></asp:ListItem>
    </asp:ListBox>
    <br />
    <hr />
    <asp:Button ID="btnGetValues" Text="دریافت مقادیر" runat="server" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnGetValues]").click(function () {
                var values = "";
                var selected = $("[id*=ListBox1] option:selected");
                selected.each(function () {
                    values += $(this).html() + " " + $(this).val() + "\n";
                });
                alert(values);
                return false;
            });
        });    
    </script>

 

فایل های ضمیمه