Dynamic Table Select Value Not Updating

asbcoder

I have a DataTables table which contains dynamically added rows. Each row contains a number of select and input boxes. When the user has finished inputting the data they will click a 'submit' button which will send the data to the database.

What I cannot get to work is to retrieve the selected value of the select control. For the input controls I use the following and it works perfectly.

            $('#table').on('change', 'input', function () {
                //Get the cell of the input
                var cell = $(this).closest('td');

                //update the value
                $(this).attr('value', $(this).val());

                //invalidate the DT cache
               t.cell($(cell)).invalidate('dom').draw();
            });

When I retrieve the value of the input on submit I get the correct value e.g.

 var data = t.row(i).column(0).data().toArray();
 var valueRequired = $(data[0]).val();

However this does not work for the select. I changed it to the following

$('#table').on('change', 'select', function () {

                //Get the cell of the input
                var cell = $(this).closest('td');

                //update the select value
                $(this).val($(this).val());

                //invalidate the DT cache
                t.cell($(cell)).invalidate('dom').draw();
            });

But no luck getting the updated value. It always returns the default option.

Any ideas how I could get the updated value of the select?

Kind regards

colin

Is this using Editor? Or are you adding the rows yourself? If so, how?

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin