Question

我试图获取通过使用jQuery克隆整个div而创建的多个保管箱的值

<div style="display: inline-block;" class="col-md-12" id="TIDiv">
  <label>TI's</label>
  <div id="TItoClone" class="TI">
    &nbsp;<asp:DropDownList ID="TIDropD1" class="TIDropD" runat="server" DataSourceID="SqlDataSource1" CssClass="btn btn-default btn-sm col-lg-8" DataTextField="nombreNom" DataValueField="IdNom" Style="width: 270px;"></asp:DropDownList>

    <a class="btn btn-danger btn-sm removeTI" style="margin-top: 1%;"><span class="glyphicon glyphicon-remove"></span></a>
    <br />
    <br />
  </div>
</div>
<div class="col-md-12"><a class="btn btn-outline-primary btn-sm addTIBtn"><span class="glyphicon glyphicon-plus"></span>Agregar TI</a></div>

我使用以下方法克隆它们：

$('body').on('click', '.addTIBtn', function () {
  var clonedNorm = $('#TIToClone').clone();
  $('.TIDropD', clonedNorm).attr('id', 'TIDropD' + indexTI);
  $('#TIDiv').append(clonedNorm);
  indexTI++;
});

我想使用jQuery将下拉列表中的选定值添加到数组中

我已经尝试过：

$(".TIDropD").each(function () {
  subcatIDs.push($(this).val());
});

$('[id^=TIDropD]').each(function (i, item) {
  var grade = $(item).val();
  alert(grade);
});

但这似乎不起作用。

谢谢。

Answer 1

我知道您正在使用asp:Dropdown，但我尝试在静态html中执行相同的操作，以使您了解如何执行此操作，希望这对执行操作有所帮助。如果我想念您的问题的任何部分，请发表评论！

$(document).ready(function(){

   
    $(".addTIBtn").click( function () {
            var htmlf = $("#TItoClone").html()
            $('#TIDiv').append(htmlf);

        });

    subcatIDs = [];
   
    $(".TIDropD").each(function (i, val) {
                subcatIDs.push($(val).val());
    });

    console.log(subcatIDs);
         
  
  
  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: inline-block;" class="col-md-12" id="TIDiv">
                <label>TI's</label>
                <div id="TItoClone" class="TI">
                    &nbsp;<select ID="TIDropD1" class="TIDropD" runat="server" DataSourceID="SqlDataSource1" CssClass="btn btn-default btn-sm col-lg-8" DataTextField="nombreNom" DataValueField="IdNom" Style="width: 270px;">
                    <option value="1" selected=selected>test1</option>
                    <option value="2" >test2</option>
</select>

                    <a class="btn btn-danger btn-sm removeTI" style="margin-top: 1%;"><span class="glyphicon glyphicon-remove"></span></a>
                    <br />
                    <br />
                </div>
            </div>
            <div class="col-md-12"><a class="btn btn-outline-primary btn-sm addTIBtn"><span class="glyphicon glyphicon-plus"></span>Agregar TI</a></div>

Answer 2

在动态创建元素时，应向每个元素添加正文

$('body').on('click', '.addTIBtn', function () {
  var clonedNorm = $('body #TIToClone').clone();
  $('body .TIDropD', clonedNorm).attr('id', 'TIDropD' + indexTI);
  $('body #TIDiv').append(clonedNorm);
  indexTI++;
});

我想获取动态创建的div上元素的值

2 个答案: