Jquery get text string of selected option in html input select

Question

I have a form with few dropdowns and couple of text fields. on click of a button all the selected options and text will display in a table.

I am able to get the value from these input items but can't figure out how to get the text string. I tried the to get text by $(input).text and option :selected but it doesn't work.

$(tr).insertBefore("#finalrow").append('<td class=row-'+ $(input).attr("id") + '>' + $(input).text() + '</td>');

 var myJson = { "platforms": [ { "name": "Main", "id": "main", "platform": [ { "name": "Platform", "id": "plat", "tasktype": [ { "name": "Promobox", "id": "promobox", "components": [ { "name": "Box 0", "id": "box0", "time": "20" } ] } ] } ] } ] }; $.each(myJson.platforms, function (index, value) { var platform_id; var tasktype_id; var component_id; var new_id; $("#workstream").append('<option rel="' + index + '" value="' + value.id + '">' + value.name + '</option>'); $("#workstream").change(function () { $("#platform, #tasktype").find("option:gt(0)").remove(); $("#platform").find("option:first").text("Loading..."); platform_id = $(this).find('option:selected').attr('rel'); $.each(myJson.platforms[platform_id].platform, function (index1, value1) { $("#platform").find("option:first").text("Select Platform"); $("#platform").append('<option rel="' + index1 + '" value="' + value1.id + '">' + value1.name + '</option>'); }); }); $("#platform").change(function () { $("#tasktype").find("option:gt(0)").remove(); $("#tasktype").find("option:first").text("Loading..."); tasktype_id = $(this).find('option:selected').attr('rel'); $.each(myJson.platforms[platform_id].platform[tasktype_id].tasktype, function (index2, value2) { $("#tasktype").find("option:first").text("Select Task type"); $("#tasktype").append('<option rel="' + index2 + '" value="' + value2.id + '">' + value2.name + '</option>'); }); }); $("#tasktype").change(function () { $("#component").find("option:gt(0)").remove(); $("#component").find("option:first").text("Loading..."); new_id = $(this).find('option:selected').attr('rel'); $.each(myJson.platforms[platform_id].platform[tasktype_id].tasktype[new_id].components, function (index2, value2) { $("#component").find("option:first").text("Select Component"); $("#component").append('<option rel="' + index2 + '" value="' + value2.id + '">' + value2.name + '</option>'); }); }); }); $(document).ready(function () { $('#calculate').click(function () { let tr = $("<tr/>").appendTo("#data tbody"); $('#calc input, #calc select').each( function (index) { var input = $(this); $(tr).insertBefore("#finalrow").append('<td class=row-'+ $(input).attr("id") + '>' + $(input).val() + '</td>'); }); const componentFactor = $(tr).children(".row-component").text(); const units = $(tr).children(".row-time").text(); const total = componentFactor*units; $("#calc")[0].reset(); $("#total").html(sumColumn(6)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="formset"> <form id="calc"> <select id="workstream" name="workstream" class="form-control"> <option value="0">Select Workstream</option> </select> <select id="platform" name="platform" class="form-control"> <option value="0">Select Platform</option> </select> <select id="tasktype" name="tasktype" class="form-control"> <option value="0">Select Task type</option> </select> <select id="component" name="component" class="form-control"> <option value="0">Select Component</option> </select> <input name="units" id="units" type="number" min="0" placeholder="Input Units" class="form-control"/> <input name="time" id="time" type="number" min="0" placeholder="Actual Time" class="form-control"/> <br /> </form> </div> <div class="btnArea"> <button id="calculate" >Add</button> </div> <div style="clear:both"></div> </div> <div class="resultsArea results"> <h2>Results</h2> <table id="data"> <thead> <tr> <th>Workstream</th> <th>Platform</th> <th>Task Type</th> <th>Component</th> <th>Units</th> <th>Time</th> </tr> <tr id="finalrow"> <td></td> <td></td> <td></td> <td></td> <td></td> <td id="total"></td> </tr> </thead> <tbody></tbody> </table> </div> 

Answer 1

Check if the field has a selected option. If yes, get it's text() , otherwise get the form field's value:

var input = $(this);
var textVal = $(input).find('option:selected').text();
if (!textVal) {
    textVal = $(input).text();
}
$(tr).insertBefore("#finalrow").append('<td class=row-'+ $(input).attr("id") + '>' + textVal + '</td>');