Drop down in HTML table and have selected value in table data in javascript

Question

I have Dropdown in html Table

                <td contenteditable="true">
                                <select class="currentCulture form-control">

                             <option value="0" >1</option>
                             <option value="1" >2</option>
                            <option value="2" >3</option>

                                 </select>

                             </td>
                             <td contenteditable="true">Stir Fry</td>
                             <td contenteditable="true">stir-fry</td>
                             <td contenteditable="true">Stir Fry</td>

I return the whole data of HTML table to my controller in json form with ajax call

      var table = $('#datatable').tableToJSON();
        var datatosend = JSON.stringify(table)
            alert(JSON.stringify(table));
            $.ajax({
                type: "POST",
                url: '/SalesContracts/addd',
                data: datatosend,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function () {
                    alert('hii');
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });

And getting Result like

   {[
     {

       "Brand": "1\n  2\n   3", 
        "Model": "Stir Fry",
        "Name": "stir-fry",
        "Quantity": "Stir Fry",
        "Unit": "stir-fry",
        "Price Cost": "Stir Fry",
        "SubTotal": "stir-fry",
         "": ""

} ]}

I am receiving all three options of select(Dropdown) "brand" I just want to get the selected one in Jsondata. Is there any possible solution for this?? . I will be thankfull if someone help me.Thank you.

TableTojson Method

    (function(e){e.fn.tableToJSON=function(t){var n={ignoreColumns:[],onlyColumns:null,ignoreHiddenRows:!0,headings:null};t=e.extend(n,t);var r=function(e){return e!==undefined&&e!==null?!0:!1},i=function(n){return r(t.onlyColumns)?e.inArray(n,t.onlyColumns)===-1:e.inArray(n,t.ignoreColumns)!==-1},s=function(t,n){var r={};return e.each(n,function(e,n){e<t.length&&(r[t[e]]=n)}),r},o=function(t){var n=[];return e(t).children("td,th").each(function(t,s){if(!i(t)){var o=e(s).data("override"),u=e.trim(e(s).text());n[n.length]=r(o)?o:u}}),n},u=function(e){var n=e.find("tr:first").first();return r(t.headings)?t.headings:o(n)},a=function(n,i){var u=[];return n.children("tbody,*").children("tr").each(function(n,a){if(n!==0||r(t.headings))if(e(a).is(":visible")||!t.ignoreHiddenRows)u[u.length]=s(i,o(a))}),u},f=u(this);return a(this,f)}})(jQuery);

IF there is another way to get tabledata with selected dropdown value please guide me to that.Thank you.

I have js library for convert whole table data to json form. <script src="~/Assets/js/jquery.tabletojson.min.js"></script> — Nauman Khan
– Nauman Khan, Commented Mar 11, 2015 at 12:50
So will you please guide me to better solution to get html table data in json with drop down selected value?. — Nauman Khan
– Nauman Khan, Commented Mar 11, 2015 at 12:54
You can use jQuery's serialize() method to collect form data, but it seems your table also has regular text you want to collect. What exactly are you trying to achieve here? — Reinder Wit
– Reinder Wit, Commented Mar 11, 2015 at 13:11

Ginish · Accepted Answer · 2015-03-11 14:33:48Z

1

I don't know whether this is will help you or may be this is not the optimized approach but it will do the job . Can't you remove the not selected option and generate the json.

I have added a temp div and cloned the table and added to that

<div id="tempdiv" style="visibility:hidden">

$('#datatable').clone().appendTo($("#tempdiv"));
var tempTable=$("#tempdiv").children(0);
var sel = tempTable.find(".currentCulture");
$(sel).children().not("option:selected").remove();

var table = (tempTable).tableToJSON();

answered Mar 11, 2015 at 14:33

Ginish

1911 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nauman Khan Over a year ago

Ginish I am very thankful to you .I have one more question will you please tell me how to populate select tag options <select > with ajax call

Ginish Over a year ago

$.ajax({ url: "/SalesContracts/get" , datatype: 'json' }) .done(function (data) { var jdata = JSON.parse(data); $.each(jdata, function (i, j) { $('#sel_data').append($("<option>", { value: j.valuefield , text: j.displayfield })); }); });

Collectives™ on Stack Overflow

Drop down in HTML table and have selected value in table data in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related