複数選択リストから動的に新しい入力フィールドを追加

Question

私はこのモーダルフォームを持っていて、2番目の選択肢で項目を複数選択すると新しいフィールドを挿入したいので、3 itensを選択すると3つの新しい入力フィールドが追加されます動的にフォームに追加します。

この

は私のフォーム

<!--Nova visita--> 
<div class="modal fade bs-example-modal-lg" id="myModalNovaVisita" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" 
    aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header card-infos"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h3><i class="glyphicon glyphicon-plus-sign"></i> Registar Nova Visita de Estudo</h3> 
      </div> 
      <div class="modal-body"> 
       <form id="novaVisita" method="post"> 
        <div class="form-group"> 
         <label for="recipient-name" class="control-label">Escola:</label> 
         <select class="form-control" id="idEscola" name="idEscola" required> 
          <option value="0">Escolha a escola desta visita</option> 
          <option value="1">Carmo</option> 
          <option value="2">Frei</option> 
          <option value="3">Santa Maria Maior</option> 
         </select> 
        </div> 
        <div class="form-group"> 
         <label for="exampleInputFile">Turmas participantes na visita(tecla "shift" para seguidos, "ctrl" 
          para 
          separados)</label> 
         <select name="turmasVisitas[]" id="turmasVisitas" class="form-control" multiple="multiple" style="height: 100pt;" onchange="getCount();"> 
          <option value=""></option> 
         </select> 
        </div> 
        <div class="form-group"> 
         <label for="recipient-name" class="control-label">Destino:</label> 
         <div class="input-group input-append date" id="localVisita"> 
          <input class="form-control" name="novoDestino" id="novoDestino" placeholder="Destino desta visita"> 
          <span class="input-group-addon add-on"><i class="fa fa-map-marker" aria-hidden="true"></i></span> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="row"> 
          <div class="col-md-6"> 
           <label for="data">Data da partida:</label> 
           <div class="input-group input-append date" id="startDatePicker"> 
            <input type="text" class="form-control" name="startDate" /> 
            <span class="input-group-addon add-on"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <label for="data">Hora da partida:</label> 
           <div class="input-group input-append date" id="horaPartida"> 
            <input type="text" class="form-control" name="part" onchange="validateHhMm(this)" /> 
            <span class="input-group-addon add-on"><i class="fa fa-clock-o" aria-hidden="true"></i></span> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div id="ajaxDivErroHora" style="display:none" class="alert alert-danger"></div> 
        </div> 
        <div class="form-group"> 
         <div class="row"> 
          <div class="col-md-6"> 
           <label for="data">Data do regresso:</label> 
           <div class="input-group input-append date" id="endDatePicker"> 
            <input type="text" class="form-control" name="endDate" /> 
            <span class="input-group-addon add-on"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <label for="data">Hora do regresso:</label> 
           <div class="input-group input-append date" id="horaChegada"> 
            <input type="text" class="form-control" name="cheg" onchange="validateHhMm(this)" /> 
            <span class="input-group-addon add-on"><i class="fa fa-clock-o" aria-hidden="true"></i></span> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div id="ajaxDivErroHora1" style="display:none" class="alert alert-danger"></div> 
        </div> 
        <div class="form-group"> 
         <label for="recipient-name" class="control-label">Professores Acompanhantes:</label> 
         <div class="input-group input-append date" id="acompanhantes"> 
          <input class="form-control" name="acomp" id="acomp" placeholder=""> 
          <span class="input-group-addon add-on"><i class="fa fa-user-circle" aria-hidden="true"></i></span> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="recipient-name" class="control-label">Departamento(s):</label> 
         <select name="dpt[]" id="dpt" class="form-control" multiple="multiple" style="height: 100pt;"> 
          <?php echo $optionDpt ?> 
         </select> 
        </div> 
        <div class="form-group"> 
         <label for="recipient-name" class="control-label">Áreas/Disciplinas Envolvidas:</label> 
         <div class="input-group input-append date" id="areas_disc"> 
          <input class="form-control" name="areas" id="areas" placeholder=""> 
          <span class="input-group-addon add-on"><i class="fa fa-bars" aria-hidden="true"></i></span> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="iti">Itinerário:</label> 
         <div class="input-group input-append date" id="itiVisita"> 
          <textarea class="form-control" rows="2" id="iti" name="iti"></textarea> 
          <span class="input-group-addon add-on"><i class="fa fa-road" aria-hidden="true"></i></span> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="recipient-name" class="control-label">Domínios (tecla "shift" para seguidos, "ctrl" para 
          separados):</label> 
         <select name="dominios[]" id="dominios" class="form-control" multiple="multiple" style="height: 100pt;"> 
          <?php echo $optionDominios ?> 
         </select> 
        </div> 
        <div class="form-group"> 
         <label for="iti">Plano de Ocupação(turmas não abrangidas pela vista):</label> 
         <div class="input-group input-append date" id="itiVisita"> 
          <textarea class="form-control" rows="2" id="planoRecuperacao" name="planoRecuperacao"></textarea> 
          <span class="input-group-addon add-on"><i class="fa fa-list-alt" aria-hidden="true"></i></span> 
         </div> 
        </div> 
        <fieldset class="scheduler-border"> 
         <legend class="scheduler-border card-infos">Transporte</legend> 
         <div class="row"> 
          <div class="col-md-6"> 
           <label for="notas">Tipo: </label> 
           <div class="form-group"> 
            <div class="btn-group" data-toggle="buttons"> 
             <label class="btn btn-default"> 
              <input type="radio" name="optradio" id="optradio" 
                value="Autocarro Autarquia">Autocarro Autarquia 
             </label> 
             <label class="btn btn-default"> 
              <input type="radio" name="optradio" id="optradio" value="Autocarro Alugado">Autocarro 
              Alugado 
             </label> 
             <label class="btn btn-default"> 
              <input type="radio" name="optradio" id="optradio" value="Outros">Outros 
             </label> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-3"> 
           <label for="custo">Total Alunos:</label> 
           <div class="form-group"> 
            <label class="form-inline"> 
             <div class="input-group input-append date" id="totalVisita"> 
              <input type="text" class="form-control" name="alunos" 
                placeholder="ex: 100"/> 
              <span class="input-group-addon add-on"><i class="fa fa-graduation-cap" 
                         aria-hidden="true"></i></span> 
             </div> 
            </label> 
           </div> 
          </div> 
          <div class="col-md-3"> 
           <label for="custo">Custo Individual:</label> 
           <div class="form-group"> 
            <label class="form-inline"> 
             <div class="input-group input-append date" id="custoVisita"> 
              <input type="text" class="form-control" name="custo" 
                placeholder="ex: 20 €"/> 
              <span class="input-group-addon add-on"><i class="fa fa-eur" 
                         aria-hidden="true"></i></span> 
             </div> 
            </label> 
           </div> 
          </div> 
         </div> 
        </fieldset> 
        <div class="form-group"> 
         <label class="col-xs-12 control-label">Observações:</label> 
         <div class="col-xs-12"> 
          <textarea rows="5" class="form-control" name="obs" id="obs"></textarea> 
         </div> 
        </div> 
        <br> 
        <div class="form-group"> 
         <input type="hidden" class="form-control" name="userid" id="userid" 
           value="<?php echo $id_prof; ?>"> 
        </div> 
        <div class="form-group"> 
         <input type="hidden" class="form-control" name="novaVisita" id="novaVisita" value="novaVisita"> 
        </div> 
        <div class="modal-footer"> 
         <button type="submit" class="btn btn-success">Registar</button> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

ですそして、私のjavascriptのはこれです：

function getCount() { 
    var count = $("#turmasVisitas :selected").length; 
    console.log(count); 
    var i; 
    for (i = 0; i < count.length; i++) { 
     $('<input type="text"/>').appendTo('novaVisita'); 
    } 
} 

何もこのコードが表示されない...

すべてのヘルプ。

Answer 1

あなたのコードはほぼ正しいです！あなたはそこに二つの小さなバグをしました：カウントは番号が既にあるので、

$('<input type="text"/>').appendTo('#novaVisita'); 
____________________________________^ 

がループからlengthを削除します：

1. あなたはこのラインにID記号#をADDD必要があります

   for (i = 0; i < count.length; i++) { 
   _____________________^^^^^^^ 
   

   は次のようになります。

   for (i = 0; i < count; i++) { 
   

これが役に立ちます。

function getCount() { 
 
    var count = $("#turmasVisitas :selected").length; 
 
    console.log(count); 
 
    var i; 
 
    for (i = 0; i < count; i++) { 
 
     $('<input type="text"/>').appendTo('#novaVisita'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!--Nova visita--> 
 
<div class="modal fade bs-example-modal-lg" id="myModalNovaVisita" tabindex="-1" role="dialog" 
 
    aria-labelledby="myModalLabel" 
 
    aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header card-infos"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
       <h3><i class="glyphicon glyphicon-plus-sign"></i> Registar Nova Visita de Estudo</h3> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <form id="novaVisita" method="post"> 
 
        <div class="form-group"> 
 
         <label for="recipient-name" class="control-label">Escola:</label> 
 
         <select class="form-control" id="idEscola" name="idEscola" required> 
 
          <option value="0">Escolha a escola desta visita</option> 
 
          <option value="1">Carmo</option> 
 
          <option value="2">Frei</option> 
 
          <option value="3">Santa Maria Maior</option> 
 
         </select> 
 
        </div> 
 
        <div class="form-group"> 
 
         <select name="turmasVisitas[]" id="turmasVisitas" class="form-control" multiple="multiple" style="height: 100pt;" onchange="getCount();"> 
 
          <option value=""></option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
          <option value="4">4</option> 
 
         </select> 
 
        </div> 
 
      </form> 
 
      <br><br><br> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

.appendTo('#novaVisita')は、あなたがそうでなければ、それが動作するはず#

を忘れてしまいました。