Question

我正在尝试克隆选择选项并将其附加到动态创建的新选择元素

这是我的代码

$(document).ready(function () {
       var addRowNut = 2;


       $('#addNewNutritionButton').on('click', function (e) {
          // clone select options
           var labelOptions = $('#label1 > option').clone();
           console.log(labelOptions);
           $('#NutBoxesGroup').append('<div id="nutGroup' + addRowNut + '"> <label>Nutrition label </label>' +
               '<select id="label' + addRowNut + '"></select>' + '</div>');

                $('input[name=nutCount]').val(addRowNut);

         // append to created select 
               $('#label'+ addRowNut ).append(labelOptions);
                  addRowNut++;
                return false;

            });
           });

这是我的问题的一个运行示例。 http://jsfiddle.net/TaEzZ/

Answer 1

您使用了错误的选择器#label1。 select的名称为label1而不是ID。

使用此功能 - attribute selector ，

var labelOptions = $('select[name=label1] > option').clone();

<强> Updated Fiddle

此外，$('input[name=nutCount]').val(addRowNut);

标记中没有引用此input元素。

Answer 2

问题出现在这一行var labelOptions = $('#label1 > option').clone();中，您试图选择一个不存在的ID。要解决此问题，您需要在HTML代码<select id="label1" name="label1">中添加ID，或选择var labelOptions = $('select[name="label1"] option').clone();

克隆选择选项无法将其附加到新元素

2 个答案: