Попытка создать 20 строк с выбранным типом и добавить к ним. (jQuery, рули и HTML) - PullRequest
Новая
       9

Попытка создать 20 строк с выбранным типом и добавить к ним. (jQuery, рули и HTML)

0 голосов
/ 18 января 2019

Благодаря другим пользователям стека, я разработал, как заставить отображать 20 DIV, используя jQuery, и теперь я хотел бы изменить второй div в созданных, чтобы он был в стиле "select", используя другой бит кода jQuery. приложить к ним флаги "option". Все они принадлежат к одному классу, но я не могу пройти мимо первого.

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>

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 18 января 2019

Ваш код 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))
    }
  });
});
...