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

شنبه 8 فروردین 1394

در این مقاله میخواهیم متن و مقدار از آیتم های انتخاب شده از یک 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>

 

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

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان
  • C#.net
  • 2k بازدید
  • 2 تشکر

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید