Question

我有一个带有硬编码值的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>');
            });
        }
    });

在这里，我可以选择要选择的值。我尝试将每个值附加到表中，但没有任何内容被绑定。有人能告诉我如何绑定选定的值？谢谢

Answer 1

错过了#

的前缀table1

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

Answer 2

更改此类代码。

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

Answer 3

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

如果您需要在每个功能中使用$(this).text()进行文字更改

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

如果你想返回工作日

Answer 5

你可以通过对console.log(data)元素使用稍微不同的选择器来实现它，并且像Sudharsan S所提到的那样将表的选择器更改为select：

#table1

可行的代码和Fiddle

 var selected = $('.limitedNumbChosen');

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

5 个答案: