從多選選擇列表中動態添加新的輸入字段

我有這種模態表單，並且當有人在第二個選擇中選擇的項目多於某個時，我想插入新的字段，因此，如果我選擇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'); 
    } 
}

沒有出現與此代碼...

任何幫助。

來源

2017-06-12 gmc1972

你的代碼幾乎是正確的！你在那裏已經兩個小錯誤：

你應該ADDD的ID登錄#這一行：

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

從環取下length由於計數已經是一個數字：

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>

來源

2017-06-12 13:59:57

啊對了，我錯過了'count.length' –

是的，現在它的工作原理，但它給了我幾個輸入...如果我選擇2，它提供了6個輸入字段 – gmc1972

你檢查了我的答案片段？它爲您提供了正確的輸入數量。 –

.appendTo('#novaVisita')，你忘了#

否則它應該工作。

來源

2017-06-12 13:50:23

謝謝，不用了....仍然沒有工作.. – gmc1972

什麼是'的console.log（計數）'輸出？ –

console.log（count）給了我選中的itens總數，但循環似乎沒有工作，我把一個控制檯日誌裏面沒有給出任何值 – gmc1972

從多選選擇列表中動態添加新的輸入字段

回答

相關問題