从下拉列表中选择选项并使用 javascript 在表格单元格中显示答案

【问题标题】：Select option from the drop down list and display in table cell using javascript从下拉列表中选择选项并使用 javascript 在表格单元格中显示
【发布时间】：2020-03-02 18:02:39
【问题描述】：

我有一个下拉列表和提交按钮以及名为 fruits 的表头

例如：如果我从下拉列表中选择一个选项并单击提交按钮。从列表中选择的选项应显示在表格单元格中。

谁能帮我解决这个问题，不胜感激。

代码如下：

$(function() {
  $("#btnGet").click(function() {
    var selectedText = $("#ddlFruits").find("option:selected").text();
    var display = document.getElementById("display");
    var newRow = display.insertRow(row);

    var cell1 = newRow.insertCell(0);
    cell1.innerHTML = selectedText;
    row++;

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="ddlFruits">
  <option value="">None</option>
  <option value="1">Apple</option>
  <option value="2">Mango</option>
  <option value="3">Orange</option>
</select>
<input type="button" id="btnGet" value="Submit" />

<table id="display">
  <tr>
    <th>Fruits</th>
  </tr>

【问题讨论】：

首先检查浏览器的错误控制台要说什么。

标签： javascript html css

【解决方案1】：

下面的代码可以工作，

$(function () {
      $("#btnGet").click(function () {
        var selectedText = $("#ddlFruits").find("option:selected").text();
        var display = document.getElementById("display");
        var newRow = display.insertRow(display.rows.length);
        var cell1 = newRow.insertCell(0);
        cell1.innerHTML = selectedText;
      });
    });

【讨论】：

【解决方案2】：

我更改了脚本。请尝试此代码。

<script type="text/javascript">
$(function () {
    $("#btnGet").click(function () {
        var selectedText = $("#ddlFruits").find("option:selected").text();
        if(selectedText!="None"){
            var display = document.getElementById("display");
             $('#display tr:last').after('<tr><th>'+selectedText+'</th></tr>');
        }



    });
});

【讨论】：

Wooooooooow :) :) 太棒了它的工作太棒了:) 非常感谢