从多选选择列表中动态添加新的输入字段

我有这种模态表单，并且当有人在第二个选择中选择的项目多于某个时，我想插入新的字段，因此，如果我选择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

从多选选择列表中动态添加新的输入字段

回答

相关问题