CODEWITHSUNDEEP
javascriptjquerydatatables
leddy
leddy

Reputation: 553

How to get value from dropdown in datatables cell

I've got two datatables and there is a dropdown created in the second one with data from the first. I've created a jsbin here

If you add a couple of instructions to the first table (add any text and then click Add Instruction) - then click on the Load Copied Data button, you will see the dropdown box is populated from the first table.

If I do:

$('#btnTest').on('click', function (e) {

    var tsor = $('#tblSORSInstall').dataTable();
    var ins = tsor.fnGetData();


    alert(ins);

});

It basically gives me the html for the dropdown - how do I get which value they have chosen? I was thinking of having a hidden column and updating that on the onchange of the dropdown, but is there a better way?

Thanks in advance

Upvotes: 2

Views: 6733

Answers (2)

Cerlin
Cerlin

Reputation: 6722

Using tsor.fnGetNodes() you can get all table row nodes, then you can loop through those and get the select values.

Final code will look something like 

 $('#btnTest').on('click', function (e) {
    var tsor = $('#tblSORSInstall').dataTable();
    var ins = tsor.fnGetData();
    var a = tsor.fnGetNodes();
    $.each(tsor.fnGetNodes(), function (index, value) {
        alert($(value).find('select').val());
    });  
});

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

You may use jQuery.map() to generate an array of selected text/value, like below.

$('#btnTest').on('click', function (e) {

    //var tsor = $('#tblSORSInstall').dataTable();

    var ins = $('#tblSORSInstall').find("tbody select").map(function() {

        return $(this).find(":selected").text() // get selected text
        //return $(this).val() // get selected value

    }).get()

    alert ( JSON.stringify(ins, null, 2) )

});

Here is your JS Bin - updated

Upvotes: 3

Related Questions