Click here to Skip to main content
15,867,997 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
Thanks

What I have tried:

HTML Part
<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>
                                   </div>
                               </div>
                           </div>
                       </div>


JQuery Part


$.ajax({
                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>');
                            duplicate.push(data.fld_cust_id);
                        }

                    });
                }

                });
Posted
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