Click here to Skip to main content
15,662,507 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have to Bind the datas from a Column in datatable into a custom search dropdown using jquery

What I have tried:

This is the HTML Part

<div class="col-sm-3">
               <div class="form-group">
                   <label for="type" class="col-sm-12 control-label">Type</label>
                   <div class="col-sm-10">
                       <div class="input-group">
                           <select id="ddl_type" name="ddl_type" class="form-control dropdown" style="height:33px" tabindex="17"></select>

This is the JQuery part

              type: 'GET',
              url: '@Url.Action("GetWebApiLog")',
              dataType: 'json',
              data: { id: $("#ddl_type").val() },
              success: function (datas, status) {
                  var $duplicate = [];
                  $("#ddl_type").append('<option  value = "' + "" + '">' + "" + '</option>');
                  $.each(datas, function (i, data) {
                      if (duplicate.indexOf(data.fldtype.split) == -1) {
                          var type = data.fldtype.split('')
                          $("#ddl_type").append('<option value ="' + type + '">' + data.fldtype + '</option>');

Pls Mention what's wrong with this TIA
Updated 12-May-22 19:23pm

1 solution

So many things wrong with that code...

Your <select> element has an ID of ddl_type, but your script tries to reference an element with the ID ddltype. Those are two completely different IDs.

You declare an array variable called $duplicate, but then use the undeclared variable duplicate for the rest of your function.

You call a jQuery method called appennd, which is not a standard method. I suspect you wanted to call append instead.

Your HTML has extra spaces between the attribute name and the equals sign.

You try to find the index of a function object in your array, rather than looking for the index of the value returned from the function.

The array wouldn't contain the value returned from the function either, since you push the entire fldtype string into the array.

You try to use an array of characters as the value of your option, rather than using an element from the array.

It's not entirely clear what you are trying to achieve with this code. But an initial clean-up would look something like this:
    type: 'GET',
    url: '@Url.Action("GetWebApiLog")',
    data: { id: $("#ddl_type").val() },
    success: function(datas) {
        const duplicate = [];
        $.each(datas, function(i, data) {
            const splitData = data.fldtype.split("-");
            if (duplicate.indexOf(splitData[0]) === -1) {
                $("#ddl_type").append($("<option/>").attr("value", splitData[0]).text(data.fldtype));

If it still doesn't work, use your browser's developer tools to debug the script to see what the problem is.
Share this answer
Manojkumar-dll 13-May-22 0:17am    
Thank You @Richard Deeming

By the way it showing an error after excution as

DataTables warning: table id=logviewgrid - Ajax error. For more information about this error, please see

any suggestion

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