Question

调用addrow()时，我们希望使用id="rowTemplate"添加动态行。我想使用(id="selectitem")将数据加载到下拉列表"myfunction()"。但是这里的问题是每次调用"myfunction()"时，只为第一行的下拉列表加载数据：

＆＃13;

//adding dynamic rows

function addRow() {

  $('#orderItem').append($('#rowTemplate').html());

  console.log($('#rowTemplate').html());
  myFunction();

}

function myFunction() {

  document.getElementById("selectitem").options.length = 0

  var SupID = document.getElementById("selectSup").value;
  document.getElementById("demo").innerHTML = "Supplier Id: " + SupID;

  var dataString = 'SupID='+ SupID;

  // AJAX Code To Submit Form.
  var postForm1 = { //Fetch form data
    'functionName': "itemLoad",
    'SupID': SupID
  };


  $.ajax({
    type: 'POST',
    url: 'suppierOrderdb.php',
    data: postForm1,
    //dataType: 'json',
    success: function (data) {

      var dd = data;



      var data = (typeof dd) == 'string' ? eval('(' + dd + ')') : dd;


      for (var i = 0; i < dd.length; i++) {


        $('#selectitem').append($('<option>',
                                  {
          value: data[i].ItemId,
          text : data[i].ItemId +" - "+ data[i].ItemName
        }));


      }


    }
    , error: function (e) {
      alert(e);
    }
  });

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="form-group row">
    <label for="selectitem" class="control-label col-xs-2">Item Name</label>
    <div class="col-xs-2">
      <select name='selectItem[]' class='form-control form-control-sm' id='selectitem'>
      </select>
    </div>

    <label for="Qty" class="control-label col-xs-2">QTY</label>
    <div class="col-xs-2">
      <input class="form-control" name="Qty[]" type="text" value="" id="Qty">
    </div>

  </div>
  <a href="javascript:void(0);" class="remCF">Remove</a>
</div>

＆＃13;

Answer 1

id在同一文档中应该是唯一的，否则您的HTML也会无效，并且会调用第一个带有重复id的元素，因此请将您的dep id替换为普通上课：

$('#orderItem').append($('#rowTemplate').html());

可能是：

$('#orderItem').append($('.rowTemplate').html());

希望这有帮助。

Answer 2

就像wlh和Zakaria Acharki所说，ID在DOM中是独一无二的。

查看this link from css-tricks以了解有关类和ID之间差异的更多信息。

另外，要访问jQuery中的类，请使用$('.classname')，将#替换为.的ID。

Answer 3

$('[id=selectitem]').append($('<option>', {
  value: data[i].ItemId,
  text: data[i].ItemId + " - " + data[i].ItemName
}));

如何在添加动态raws时将选项添加到具有相同id的多个下拉列表

3 个答案: