Jquery在html输入选择中获取所选选项的文本字符串

Question

我有一个包含少量下拉列表和几个文本字段的表单。单击按钮，所有选定的选项和文本将显示在表格中。

我可以从这些输入项中获取值，但无法弄清楚如何获取文本字符串。我尝试通过$（输入）.text和选项获取文本：已选中，但它不起作用。

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

＆＃13;

＆＃13;

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));
           



        });
		
		
		
    });
  

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;