HelloIm using a multiple select dropdown to display technologies and allow an user to selectNow when a user selects multiple values from the list I want to display it in a textbox on a button clickreferencesltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgtltlink rel34stylesheet34 href34httpscdnjscloudflarecomajaxlibsselect2403cssselect2mincss34 gtltscript type34tex

Get jQuery Select2 multiselect DropDownList selected value as comma separated in ASP.Net

jmpratee...

SOLVED CLOSED ACTIVE ANSWERED
User: jmprateek
Posted: on Dec 01, 2019 03:40 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 14784
Sample Code: Download

Hello

I'm using a multiple select dropdown to display technologies and allow an user to select.

Now when a user selects multiple values from the list I want to display it in a textbox on a button click.

references:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".js-example-placeholder-single").select2({
            placeholder: "Select",
            allowClear: true
        });
    });
</script>

aspx markup:

<div class="col-md-6">
    <div class="form-group">
        <label>
            Values Selected</label>
        <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" placeholder="email"></asp:TextBox>
    </div>
</div>
<div class="col-md-6">
    <div class="form-group">
        <label>
            Technologies</label>
        <asp:DropDownList ID="ddl1" runat="server" multiple="multiple" CssClass="form-control js-example-placeholder-single form-control"
            ToolTip="Select ">
            <asp:ListItem>C/CPP</asp:ListItem>
            <asp:ListItem>JAVA</asp:ListItem>
            <asp:ListItem>C#</asp:ListItem>
            <asp:ListItem>PYTHON</asp:ListItem>
            <asp:ListItem>PHP</asp:ListItem>
            <asp:ListItem>ANGULAR</asp:ListItem>
        </asp:DropDownList>
    </div>
</div>
<div class="pull-right">
    <asp:Button ID="btnSubmit" runat="server" CssClass="btn btn-primary" Text="Submit"
        OnClick="btnSubmit_Click" />
</div>

c# code behind:

protected void btnSubmit_Click(object sender, EventArgs e)
{
    foreach (int i in ddl1.SelectedIndex.ToString())
    {
        txtName.Text += ddl1.Items[i].Value + ", ";
    }
}

kindly help, thanks in advance!

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Dec 02, 2019 12:55 AM
Report

Hi jmprateek,

Check this example. Now please take its reference and correct your code.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=ddlCourses]').select2({
            placeholder: "Select",
            allowClear: true
        });
        $('[id*=ddlCourses]').on('change', function () {
            $('#<%=hfCourses.ClientID%>').val($(this).val());
        });
    });
</script>
<div class="col-md-6">
    <div class="form-group">
        <label>Values Selected</label>
        <asp:TextBox ID="txtName" runat="server" CssClass="form-control" placeholder="Courses"></asp:TextBox>
        <asp:HiddenField ID="hfCourses" runat="server" />
    </div>
</div>
<div class="col-md-6">
    <div class="form-group">
        <label>Technologies</label>
        <asp:DropDownList ID="ddlCourses" runat="server" multiple="multiple" ToolTip="Select"
            CssClass="form-control js-example-placeholder-single form-control">
            <asp:ListItem>C/CPP</asp:ListItem>
            <asp:ListItem>JAVA</asp:ListItem>
            <asp:ListItem>C#</asp:ListItem>
            <asp:ListItem>PYTHON</asp:ListItem>
            <asp:ListItem>PHP</asp:ListItem>
            <asp:ListItem>ANGULAR</asp:ListItem>
        </asp:DropDownList>
    </div>
</div>
<div class="pull-right">
    <asp:Button ID="btnSubmit" runat="server" CssClass="btn btn-primary" Text="Submit" OnClick="OnSubmit" />
</div>

Code

protected void OnSubmit(object sender, EventArgs e)
{
    txtName.Text = "";
    txtName.Text += string.Join(", ", hfCourses.Value.Split(',').ToArray());
    ddlCourses.SelectedIndex = -1;
    hfCourses.Value = "";
}

VB.Net

Protected Sub OnSubmit(sender As Object, e As System.EventArgs)
    txtName.Text = ""
    txtName.Text += String.Join(", ", hfCourses.Value.Split(","c).ToArray())
    ddlCourses.SelectedIndex = -1
    hfCourses.Value = ""
End Sub

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Get jQuery Select2 multiselect DropDownList selected value as comma separated in ASP.Net

Company

Explore

Follow us

Contact Us