循环数组，追加输入文本框，然后设置这些文本框的值

Loop round array, append input text boxes then set values of those text boxes

本文关键字：文本 设置 然后 输入 数组 循环 追加      更新时间：2023-09-26

我正在尝试循环，并根据存储在数组中的值附加一些容器，然后相应地设置这些值，但我目前正在复制这些值，并且每次循环时不能获得不同的值。

var arr_tele = ['02991812376', '02982919291'];
//Prevent Duplicates.
$(".teledivcontain").remove();
//Append Container for numbers
$("#telediv").append('<div class="form-group col-md-3" id="teledivcontain"> </div>');
//Loop and append fields for each number
for (i in arr_tele) {
  $("#teledivcontain").append('<input type="text" class="form-control telenumber" placeholder="No number currently" disabled><div class="form-group col-md-3"><button type="submit" class="btn btn-primary form-control detach">Detach</button></div>').find('input:text').val(arr_tele[i]);
}
.fieldpos {
  margin-left: 45px;
  width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel-body row fieldpos">
  <fieldset class="form-group">
    <label for="telenum">Your Telephone Numbers</label>
    <div class="row">
      <div id="telediv">
      </div>
    </div>
  </fieldset>
</div>

我错过了一些小的，但不能看到什么任何人任何想法?

您必须找到附加的最后一个输入，然后分配值，因此只需添加:last选择器即可完成工作:

.find('input:text:last').val(arr_tele[i])

或者您可以直接使用<input value="'+arr_tele[i]+'" ...赋值。

希望对你有帮助。

var arr_tele = ['02991812376', '02982919291'];
//Prevent Duplicates.
$(".teledivcontain").remove();
//Append Container for numbers
$("#telediv").append('<div class="form-group col-md-3" id="teledivcontain"> </div>');
//Loop and append fields for each number
for (i in arr_tele) {
  $("#teledivcontain").append('<input type="text" class="form-control telenumber" placeholder="No number currently" disabled><div class="form-group col-md-3"><button type="submit" class="btn btn-primary form-control detach">Detach</button></div>').find('input:text:last').val(arr_tele[i]);
}
.fieldpos {
  margin-left: 45px;
  width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel-body row fieldpos">
  <fieldset class="form-group">
    <label for="telenum">Your Telephone Numbers</label>
    <div class="row">
      <div id="telediv">
      </div>
    </div>
  </fieldset>
</div>

只需在HTML中添加属性即可。循环内注意'<input type="text" ... value="' + arr_tele[i] + '"disabled>:

var arr_tele = ['02991812376', '02982919291'];
//Prevent Duplicates.
$(".teledivcontain").remove();
//Append Container for numbers
$("#telediv").append('<div class="form-group col-md-3" id="teledivcontain"> </div>');
//Loop and append fields for each number
for (i in arr_tele) {
  $("#teledivcontain").append('<input type="text" class="form-control telenumber" placeholder="No number currently" value="' + arr_tele[i] + '"disabled><div class="form-group col-md-3"><button type="submit" class="btn btn-primary form-control detach">Detach</button></div>');
}
.fieldpos {
  margin-left: 45px;
  width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel-body row fieldpos">
  <fieldset class="form-group">
    <label for="telenum">Your Telephone Numbers</label>
    <div class="row">
      <div id="telediv">
      </div>
    </div>
  </fieldset>
</div>

相关文章：