尝试创建 20 行 select 类型，并附加到它们。 （jQuery、车把和 HTML）

Question

感谢其他堆栈用户，我弄清楚了如何使用 jQuery 让 20 个 DIV 出现，现在我想将创建的第二个 div 修改为 "select" 样式，使用另一位 jQuery 代码将 "option" 标志附加到它们。他们都共享相同的 class，但我无法通过第一个。

HTML（车把）

<script>

$(document).ready(function(){
    $(".jerseyNumber").each(function(){
    for (n=1;n<=99;n++){
        var $select = $(this);
        $select.append($('<option></option>').val(n).html(n))
        }
    });
});
</script>
<script>
$(document).ready(function() {
  for (i = 1; i < 20; i++) {
    text = "<div class='form-group row'><div class='col-md-6'><input id='player" + i + "Name' name='player" + i + "Name' placeholder='Firstname Lastname' type='text' class='form-control here'></div><div class='col-md-6'><select id='player" + i + "Number' name='player" + i + "Number'  class='form-control here jerseyNumber'></select></div></div>";
    var playerSpan = $('.player');
    playerSpan.append($(text));
  }
});
</script>
<div class="container-fluid" id="body">
    <div class="container" id="page-header">
        <h1><span id="headline">Add a team</span></h1>
        <hr>
        <h3><span id="subheadline">Please enter the information below to add to the database</span></h3>
                    <form method="post" action="/create">
                        <div class="form-group row">
                            <div class="col-md-6">
                        <label for="teamName" class="col-form-label">Team Name</label>
                            <input id="teamName" name="teamName" placeholder="London Lemmings" type="text" required="required" class="form-control here">
                        </div>
                            <div class="col-md-6">
                        <label for="teamShortName" class="col-form-label">Team Short Name</label>
                        <input id="teamShortName" name="teamShortName" placeholder="LLM" type="text" aria-describedby="teamShortNameHelpBlock" required="required" maxlength="3" class="form-control here">
                        <span id="teamShortNameHelpBlock" class="form-text text-muted">Three Characters Only</span>
                        </div>
                    </div>
                    <div class="form-group row">
                            <div class="col-md-6">
                        <label for="coachName" class="col-form-label">Coach Name</label>
                        <input id="coachName" name="coachName" type="text" class="form-control here">
                        </div>
                    </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                        <label for="goalieName" class="col-form-label">Goalie Name</label>
                        <input id="goalieName" name="goalieName" type="text" class="form-control here">
                        </div>
                            <div class="col-md-6">
                                <label for="goalieNumber" class="col-form-label">Goalie Number</label>
                            <select id="goalieNumber" name="goalieNumber" class="form-control here jerseyNumber">
                                    </select>
                            </div>
                    </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <strong>Player Names</strong>
                            </div>
                            <div class="col-md-6">
                                <strong>Player Numbers</strong>
                        </div>
                    </div>
                        <span class="player">





                        </span>
                    <div class="form-group row">
                        <div class="col-md-6">
                        <button name="submit" type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        <hr>
    </div>
</div>

感谢任何帮助。

Answer 1

您的代码 player" + i + "jerseyNumber 将输出，例如 player1jerseyNumber 但您想要 player1 jerseyNumber... 所以这是一个简单的间距问题。

class='form-control here player" + i + " jerseyNumber'

您还需要将 select 循环放在 div 循环之后，甚至将您的代码合并到一个 .ready() 函数中。

$(document).ready(function() {
  for (i = 1; i < 20; i++) {
    text = "<div class='form-group row'><div class='col-md-6'><input id='player" + i + "Name' name='player" + i + "Name' placeholder='Firstname Lastname' type='text' class='form-control here'></div><div class='col-md-6'><select id='player" + i + "Number' name='player" + i + "Number'  class='form-control here player" + i + "jerseyNumber'></select></div></div>";
    var playerSpan = $('.player');
    playerSpan.append($(text));
  }

  $(".jerseyNumber").each(function(){
    var $select = $(this);
    for (n=1;n<=99;n++){
      $select.append($('<option></option>').val(n).text(n))
    }
  });
});