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

 

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