Select option from the drop down list and display in table cell using javascript

Question

I have a drop down list and submit button along with table header called fruits

For example: If I select one of the option from the drop down list and by clicking the submit button. The selected option from the list, should display in table cell.

Could some one help me to resolve the issue that would be grateful.

Here is code:

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

Start by checking what the browser’s error console has to say. — 04FS
– 04FS, Commented Nov 6, 2019 at 9:47

Gangadhar Gandi · Accepted Answer · 2019-11-06 09:54:24Z

1

The below code will work,

$(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;
      });
    });

answered Nov 6, 2019 at 9:54

Gangadhar Gandi

2,26214 silver badges20 bronze badges

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

Comments

ubm · Accepted Answer · 2019-11-06 10:04:25Z

0

I changed the script.Please try this code.

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



    });
});

answered Nov 6, 2019 at 10:04

ubm

63611 silver badges21 bronze badges

1 Comment

sanjiv kumar Over a year ago

Wooooooooow :) :) Superb its working too great job:) thanks a lot

Collectives™ on Stack Overflow

Select option from the drop down list and display in table cell using javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related