Click here to Skip to main content
15,880,905 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
i have a dropdownlist and the data will be binding from the server now i want to convert the DDL to Multiselect Searcable dropdownlist

need help

What I have tried:

<div class="col-sm-2">
                           <div class="form-group">
                               <label for="custid" class="col-sm-12 control-label">Customer ID</label>
                               <div class="col-sm-10">
                                   <div class="input-group">
                                       <select id="ddl_Custid" name="ddl_Custid" class="form-control dropdown " style="height:33px" tabindex="17"></select>

JQuery Part

                type: 'GET',
                url: '@Url.Action("GetReport", "Report")',
                dataType: 'json',
                 data: { id: $("#ddl_Custid").val() },
                success: function (datas, status) {
                    var duplicate = [];

                    $("#ddl_Custid").append('<option value="-1">' + "-Select-" + '</option>');

                    $.each(datas, function (i, data) {
                        if (duplicate.indexOf(data.fld_cust_id) == -1) {
                            $("#ddl_Custid").append('<option value="' + data.fld_cust_id + '">' + data.fld_cust_id + '</option>');


Updated 13-Oct-22 1:33am

1 solution

That's not currently* supported by native HTML controls, so you'll need to use a plugin. For example:
Getting Started | Select2 - The jQuery replacement for select boxes[^]

* If you want to live on the bleeding-edge, and only support Chromium browsers with tweaked settings, you may be able to use the selectmenu element[^]. But be aware that it's an experimental technology, and could either change significantly or be dropped entirely before any major browser supports it by default.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900