Selecting data from dropdown using jquery

Question

I am trying to implement select based on drop-down in jquery. Data in table is populated using java from database My jquery script code is

    <script>    
    $(document).ready(function () {
            $("#companies").dataTable({
            "bServerSide": true,
            "sAjaxSource": "/JQueryDataTablesAll/CompanyGsonMatrix",
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "bJQueryUI": true
        });
        $('#mySelect').DataTable( {
            initComplete: function () {
              var api = this.api();
              alert("test");
              api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                  .appendTo( $(column.footer()).empty() )
                  .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                      $(this).val()
                    );

                    column
                      .search( val ? '^'+val+'$' : '', true, false )
                      .draw();
                  } );

                column.data().unique().sort().each( function ( d, j ) {
                  select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
              } );
            }
          } );
    });
  </script>

my html select code is

<select id="mySelect">
  <option value="">Emkay</option>
  <option vaoue="1">
</option>

but this is not working. I am new to jquery so please help me to sort out the issue.

Answer 1

Try fixing like this:

$(document).ready(function () {
    $("#companies").DataTable({
        "bServerSide": true,
        "sAjaxSource": "/JQueryDataTablesAll/CompanyGsonMatrix",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        initComplete: function () {
            var api = this.api();
            alert("test");
            api.columns().indexes().flatten().each(function (i) {
                var column = api.column(i);
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());

                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });
});

This code will add a select at the bottom of each column. If you just want one select to search the whole table via your own options, you can do something like this:

$(document).ready(function () {
    $('#example').DataTable({
        "bServerSide": true,
        "sAjaxSource": "/JQueryDataTablesAll/CompanyGsonMatrix",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        initComplete: function () {
            var self = this,
                api = self.api(),
                $select = $('#mySelect');

            $select.change(function (e) {
                var val = $.fn.DataTable.util.escapeRegex($(this).val());
                api.search(val ? val : '', true, false).draw();
            });

        }
    });
});

FIDDLE