如何使用 jquery 将下拉选择的数据添加到表中？答案

【问题标题】：How to add dropdown selected data to table using jquery?如何使用 jquery 将下拉选择的数据添加到表中？
【发布时间】：2016-12-08 07:28:27
【问题描述】：

我有一个带有硬编码值的 jquery 下拉列表框，如下所示。

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

我可以在这里选择多个选项。我下面有一个按钮，我也有一张桌子。单击该按钮时，我想将选定的值添加到表行中。我有下面的脚本来获取选定的值

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

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

在这里，我可以选择选定的值。我试图将每个值附加到上面的表中，但没有任何绑定。有人可以告诉我如何绑定选定的值吗？谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

试试这个：删除所选变量中的text()，并在每个函数中添加$('#table1')

如果您需要在每个函数中使用 $(this).text() 更改文本

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

【讨论】：

【解决方案2】：

ID table1 缺少前缀 #

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

【讨论】：

抱歉，谢谢您的回复。我收到错误说 selected.each 不是函数。

【解决方案3】：

像这样更改代码。

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

【讨论】：

谢谢。是的，所有选定的值都应该用逗号分隔，但上面的代码不起作用。如果我选择星期一和星期二，它会显示星期一星期二。

【解决方案4】：

删除text 函数，为表格使用正确的选择器

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

或：

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

如果你想返回工作日

【讨论】：

【解决方案5】：

您可以通过对 select 元素使用稍微不同的选择器来使其工作，就像 Sudharsan S 将表的选择器更改为 #table1 所提到的那样：

 var selected = $('.limitedNumbChosen');

可行的代码和Fiddle

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

【讨论】：