How to add dropdown selected data to table using jquery?

Question

I have one jquery dropdownlist box with hardcoded values as below.

<h2 class="form-box form-box-default">Jquery Dropdown List with Max 2 select</h2>
        <select class="limitedNumbChosen" multiple="true">
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <option value="6">Saturday</option>
            <option value="7">Sunday</option>
        </select>
        <input type="button" value="Get Values" class="submit1" id="submit1" />
        <table id="table1">
        </table>

I can select multiple options here. I have one button below and i also have one table. On clicking on that button i want to add selected values to table rows. I have below script to get selected values

 $("#submit1").click(function () {
        {
            var selected = $('.limitedNumbChosen :selected').text();

            selected.each(function () {
                $('table1').append('<tr><td>'+$(this).val() +'</td></tr>');
            });
        }
    });

Here I am able to get selected values to selected. I tried to append each value to table as above but nothing gets binded. Can someone tell me how can i bind the selected values? Thank you

prasanth · Accepted Answer · 2016-12-08 07:38:15Z

Try this: remove the text() in var selected, and add $('#table1') in each function

If you need a text change with $(this).text() in each function

$("#submit1").click(function () {
        {
            var selected = $('.limitedNumbChosen :selected');
          selected.each(function (a) {
                 $('#table1').append('<tr><td>'+$(this).val()+'</td></tr>');
            // $('#table1').append('<tr><td>'+$(this).text()+'</td></tr>');
            //if you need ah text like days do with that
            });
        }
    });

table,tr,td{
  border:1px solid red;
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="form-box form-box-default">Jquery Dropdown List with Max 2 select</h2>
        <select class="limitedNumbChosen" multiple="true">
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <option value="6">Saturday</option>
            <option value="7">Sunday</option>
        </select>
        <input type="button" value="Get Values" class="submit1" id="submit1" />
        <table id="table1">
        </table>

Sudharsan S · Accepted Answer · 2016-12-08 07:29:42Z

1

Missed out prefix # for the id table1

$('#table1').append('<tr><td>'+$(this).val() +'</td></tr>');

answered Dec 8, 2016 at 7:29

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

1 Comment

Niranjan Godbole Over a year ago

Oh sorry Thank you for your response. I got error saying that selected.each is not a function.

Husen · Accepted Answer · 2016-12-08 07:35:58Z

1

Change code like this.

 var selected = $('.limitedNumbChosen :selected').text().split(",");

answered Dec 8, 2016 at 7:35

Husen

1,58510 silver badges14 bronze badges

1 Comment

Niranjan Godbole Over a year ago

Thank you. Yes all selected values should split by comma but above piece of code is not working. If i select monday and tuesday it shows me mondaytuesday.

madalinivascu · Accepted Answer · 2016-12-08 07:38:43Z

1

Remove the text function, use the correct selector for the table

var selected = $('.limitedNumbChosen :selected');
    selected.each(function () {
        $('#table1').append('<tr><td>'+$(this).val() +'</td></tr>');
    });

or :

 var selected = $('.limitedNumbChosen :selected');
        selected.each(function () {
            $('#table1').append('<tr><td>'+$(this).text() +'</td></tr>');
        });

if you want to return the weekdays

answered Dec 8, 2016 at 7:38

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Comments

jyrkim · Accepted Answer · 2016-12-08 07:54:41Z

1

You can get it working by using slightly different selector for select element, and like mentioned by Sudharsan S changing the selector for table to #table1:

 var selected = $('.limitedNumbChosen');

workable code and Fiddle

$("#submit1").click(function() {
  {
    var selected = $('.limitedNumbChosen');
    selected.each(function() {
      $('#table1').append('<tr><td>' + $(this).val() + '</td></tr>');
    });
  }
});

answered Dec 8, 2016 at 7:54

jyrkim

2,8791 gold badge26 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to add dropdown selected data to table using jquery?

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related