CODEWITHSUNDEEP
jquery
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

How to add dropdown selected data to table using jquery?

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

Upvotes: 2

Views: 7507

Answers (5)

jyrkim
jyrkim

Reputation: 2869

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

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

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

Upvotes: 1

prasanth
prasanth

Reputation: 22490

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>

Upvotes: 2

Husen
Husen

Reputation: 1587

Change code like this.

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

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15393

Missed out prefix # for the id table1

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

Upvotes: 1

Related Questions