Добавить поле ввода на основе выбранного значения с помощью jquery

Я пытаюсь добавить поля ввода на основе выбранных значений из раскрывающегося списка. Я хочу добавить поля ввода на <div>. Я действительно много пробовал, но я не могу найти ошибки. Может быть, кто-то в этом сообществе Престола это уже ...Добавить поле ввода на основе выбранного значения с помощью jquery

$(document).ready(function() { 
 
    //Initialize tooltips 
 
    $('.nav-tabs > li a[title]').tooltip(); 
 
    
 
    //Wizard 
 
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
 

 
     var $target = $(e.target); 
 
    
 
     if ($target.parent().hasClass('disabled')) { 
 
      return false; 
 
     } 
 
    }); 
 

 
    $(".next-step").click(function (e) { 
 

 
     var $active = $('.wizard .nav-tabs li.active'); 
 
     $active.next().removeClass('disabled'); 
 
     nextTab($active); 
 

 
    }); 
 
    $(".prev-step").click(function (e) { 
 

 
     var $active = $('.wizard .nav-tabs li.active'); 
 
     prevTab($active); 
 

 
    }); 
 
    
 
    // $(document).on('ready', function() { 
 
    // $("#input-4").fileinput({showCaption: false}); 
 
//}); 
 
}); 
 

 
function nextTab(elem) { 
 
    $(elem).next().find('a[data-toggle="tab"]').click(); 
 
} 
 
function prevTab(elem) { 
 
    $(elem).prev().find('a[data-toggle="tab"]').click(); 
 
} 
 

 

 
//according menu 
 

 
$(document).ready(function() 
 
{ 
 
    //Add Inactive Class To All Accordion Headers 
 
    $('.accordion-header').toggleClass('inactive-header'); 
 
\t 
 
\t //Set The Accordion Content Width 
 
\t var contentwidth = $('.accordion-header').width(); 
 
\t $('.accordion-content').css({}); 
 
\t 
 
\t //Open The First Accordion Section When Page Loads 
 
\t $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header'); 
 
\t $('.accordion-content').first().slideDown().toggleClass('open-content'); 
 
\t 
 
\t // The Accordion Effect 
 
\t $('.accordion-header').click(function() { 
 
\t \t if($(this).is('.inactive-header')) { 
 
\t \t \t $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
 
\t \t \t $(this).toggleClass('active-header').toggleClass('inactive-header'); 
 
\t \t \t $(this).next().slideToggle().toggleClass('open-content'); 
 
\t \t } 
 
\t \t 
 
\t \t else { 
 
\t \t \t $(this).toggleClass('active-header').toggleClass('inactive-header'); 
 
\t \t \t $(this).next().slideToggle().toggleClass('open-content'); 
 
\t \t } 
 
\t }); 
 
\t 
 
\t return false; 
 
});

<html> 
 
    <head> 
 
     <title>Registration</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
     <link rel="stylesheet" href="Wizard.css" type="text/css" /> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
     <script type="text/javascript" src="Wizard.js"></script> 
 
     <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
 
     <link href="../prettify.css" rel="stylesheet"> 
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script> 
 
     <link rel="stylesheet" href="css/wizard.css" type="text/css"> 
 
    </head> 
 
    <body> 
 

 

 
     <div class="container"> 
 
      <div class="row"> 
 
       <section> 
 
        <div class="wizard"> 
 
         <div class="wizard-inner"> 
 
          <div class="connecting-line"></div> 
 
          <ul class="nav nav-tabs" role="tablist"> 
 

 
           <li role="presentation" class="active"> 
 
            <a href="#persInfo" data-toggle="tab" aria-controls="persInfo" role="tab" title="Person"> 
 
             <span class="round-tab"> 
 
              <i class="glyphicon glyphicon-home"></i> 
 
             </span> 
 
            </a> 
 
           </li> 
 

 
           <li role="presentation" class="disabled"> 
 
            <a href="#boxInfo" data-toggle="tab" aria-controls="boxInfo" role="tab" title="Box"> 
 
             <span class="round-tab"> 
 
              <i class="glyphicon glyphicon-home"></i> 
 
             </span> 
 
            </a> 
 
           </li> 
 
           <li role="presentation" class="disabled"> 
 
            <a href="#compInfo" data-toggle="tab" aria-controls="compInfo" role="tab" title="Competition"> 
 
             <span class="round-tab"> 
 
              <i class="glyphicon glyphicon-fire"></i> 
 
             </span> 
 
            </a> 
 
           </li> 
 

 
           <li role="presentation" class="disabled"> 
 
            <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> 
 
             <span class="round-tab"> 
 
              <i class="glyphicon glyphicon-ok"></i> 
 
             </span> 
 
            </a> 
 
           </li> 
 
          </ul> 
 
         </div> 
 

 
         <form role="form"> 
 
          <div class="tab-content"> 
 
           <div class="tab-pane active" role="tabpanel" id="persInfo"> 
 
            <div class="persInfo"> 
 
             <div class="row"> 
 
              <div class="col-md-6"> 
 
               <label for="exampleInputEmail1">Competition Name</label> 
 
               <input type="text" class="form-control" id="compName" placeholder="Competition Name"> 
 
              </div> 
 
              <div class="col-md-6"> 
 
               <label for="exampleInputEmail1">Registration Code for athletes</label> 
 
               <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Registration Code for athletes"> 
 
              </div> 
 
             </div> 
 

 
             <div class="row"> 
 

 

 
              <div class="col-md-6"> 
 

 
               <label for="exampleInputEmail1">Competition Date</label> 
 
               <div> 
 
                <div class="col-md-4 col-xs-4 wdth"> 
 

 
                 <select name="visa_status" id="visa_status" class="dropselectsec1"> 
 
                  <option value="">Day</option> 
 
                  <option value="2">1</option> 
 
                  <option value="1">2</option> 
 
                  <option value="4">3</option> 
 
                  <option value="5">4</option> 
 
                  <option value="6">5</option> 
 
                  <option value="3">6</option> 
 
                  <option value="7">7</option> 
 
                  <option value="8">8</option> 
 
                  <option value="9">9</option> 
 
                 </select> 
 
                </div> 
 
                <div class="col-md-4 col-xs-4 wdth"> 
 

 
                 <select name="visa_status" id="visa_status" class="dropselectsec1"> 
 
                  <option value="">Month</option> 
 
                  <option value="2">Jan</option> 
 
                  <option value="1">Feb</option> 
 
                  <option value="4">Mar</option> 
 
                  <option value="5">Apr</option> 
 
                  <option value="6">May</option> 
 
                  <option value="3">June</option> 
 
                  <option value="7">July</option> 
 
                  <option value="8">Aug</option> 
 
                  <option value="9">Sept</option> 
 
                 </select> 
 
                </div> 
 
                <div class="col-md-4 col-xs-4 wdth"> 
 

 
                 <select name="visa_status" id="visa_status" class="dropselectsec1"> 
 
                  <option value="">Year</option> 
 
                  <option value="2">1990</option> 
 
                  <option value="1">1991</option> 
 
                  <option value="4">1992</option> 
 
                  <option value="5">1993</option> 
 
                  <option value="6">1994</option> 
 
                  <option value="3">1995</option> 
 
                  <option value="7">1996</option> 
 
                  <option value="8">1997</option> 
 
                  <option value="9">1998</option> 
 
                 </select> 
 

 
                </div> 
 
               </div> 
 
              </div> 
 
             </div> 
 
            </div> 
 
            <ul class="list-inline pull-right"> 
 
             <li><button type="button" class="btn btn-primary next-step">Next</button></li> 
 
            </ul> 
 
           </div> 
 
           <div class="tab-pane" role="tabpanel" id="boxInfo"> 
 
            <div class="boxInfo"> 
 

 

 

 

 

 

 
             <script> 
 
              $(document).ready(function() { 
 
               $('select#selectDiv').change(function() { 
 
                var sel_value = $('option:selected').val(); 
 

 
                if (sel_value == 0) { 
 
                 $("#test1").empty(); // Resetting Form 
 

 
                } else { 
 
                 $("#test1").empty(); //Resetting Form 
 
                 create(sel_value); 
 
                } 
 
               }); 
 
               function create(sel_value) { 
 
                for (var i = 1; i <= sel_value; i++) { 
 
                 $("#test1").append($("<label/>").text(i + ". Division Name"), $("<input/>", { 
 
                  class: 'form-control', 
 
                  type: 'text', 
 
                  name: 'name_' + i 
 
                 }), $("<br/>"), $("<input/>", { 
 
                  type: 'text', 
 
                  value: sel_value, 
 
                  name: 'NumbDiv_' + i 
 
                 }), $("<br/>"), $("<br/>")); 
 
                } 
 
               } 
 
              }); 
 

 
             </script> 
 

 
             <div class="col-md-6"> 
 
              <label for="exampleSelect1">Number of Divisions</label> 
 
              <select class="form-control" id="selectDiv" name="select" > 
 
               <option value="0">0</option> 
 
               <option value="1">1</option> 
 
               <option value="2">2</option> 
 
               <option value="3">3</option> 
 
               <option value="4">4</option> 
 
              </select> 
 
             </div> 
 

 
             <div class="col-md-6" id="test1"> 
 

 
             </div> 
 

 

 

 

 

 

 
             
 
             <div class="col-md-6"> 
 
              <label for="exampleInputEmail1">Street</label> 
 
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Street"> 
 
             </div> 
 

 

 

 
            </div> 
 
            <ul class="list-inline pull-right"> 
 
             <li><button type="button" class="btn btn-default prev-step">Back</button></li> 
 
             <li><button type="button" class="btn btn-primary next-step">Next</button></li> 
 
            </ul> 
 
           </div> 
 

 

 

 
           <div class="tab-pane" role="tabpanel" id="compInfo"> 
 
            <div class="compInfo"> 
 

 

 
             <div class="row"> 
 

 
              <div class="col-md-6"> 
 
               <label for="exampleInputEmail1">Competition Name</label> 
 
               <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Competition Name"> 
 
              </div> 
 
              <div class="col-md-6"> 
 
               <label class="control-label">Competition Logo</label> 
 
               <input id="input-4" name="input4[]" type="file" class="file-loading"> 
 
              </div> 
 
             </div> 
 

 
             <div class="row"> 
 
              <div class="col-md-6"> 
 
               <label for="exampleInputEmail1">Street</label> 
 
               <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Street"> 
 

 
              </div> 
 
              <div class="col-md-6"> 
 
               <label for="exampleInputEmail1">City</label> 
 
               <input type="email" class="form-control" id="exampleInputEmail1" placeholder="City"> 
 
              </div> 
 
             </div> 
 
             <div class="row"> 
 
              <div class="col-md-6"> 
 
               <label for="exampleInputEmail1">Postal Code</label> 
 
               <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Postal Code"> 
 

 
              </div> 
 
              <div class="col-md-6"> 
 
               <label for="exampleInputEmail1">Country</label> 
 
               <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Country"> 
 
              </div> 
 
             </div> 
 

 

 
             
 

 
            </div> 
 
            <ul class="list-inline pull-right"> 
 
             <li><button type="button" class="btn btn-default prev-step">Back</button></li> 
 
             <!--<li><button type="button" class="btn btn-default next-step">Skip</button></li>--> 
 
             <li><button type="button" class="btn btn-primary btn-info-full next-step">Next</button></li> 
 
            </ul> 
 
           </div> 
 
           <div class="tab-pane" role="tabpanel" id="complete"> 
 
            <div class="step44"> 
 
             <h5>Completed</h5> 
 

 
             <ul class="list-inline pull-right"> 
 
              <li><button type="button" class="btn btn-default prev-step">Back</button></li> 
 
              <!--<li><button type="button" class="btn btn-default next-step">Skip</button></li>--> 
 
              <li><button type="button" class="btn btn-primary btn-info-full next-step">Finish</button></li> 
 
             </ul> 
 
            </div> 
 
           </div> 
 
           <div class="clearfix"></div> 
 
          </div> 
 
         </form> 
 
        </div> 
 
       </section> 
 
      </div> 
 
     </div> 
 
     <script type="text/javascript" src="js/wizard.js"></script> 
 
    </body> 
 
</html>

источник

2016-11-26 romeromero123

Если я ошибаюсь, вам не хватает закрывающего ')' для вашего добавления. – Taplar

thx для этого совета изменил его, но, к сожалению, он все еще не работает. – romeromero123

Там нет элемента с идентификатором test1, есть test хотя.

Также ваше заявление append закрывается раньше, так что у вас есть серия разделенных запятыми операторов.

Так

$("#test1").append($("<label/>").text(i + ". Division Name")) 
             //move this bracket^
... 
}), $("<br/>"), $("<br/>"); 
     //and put it here^

. .

$("#test").append($("<label/>").text(i + ". Division Name"), $("<input/>", { 
    class: 'form-control', 
    type: 'text', 
    name: 'name_' + i 
}), $("<br/>"), $("<input/>", { 
    type: 'text', 
    value: sel_value, 
    name: 'NumbDiv_' + i 
}), $("<br/>"), $("<br/>"));

$(document).ready(function() { 
 
    $('select#selectDiv').change(function() { 
 
     var sel_value = $(this).val(); 
 

 
     if (sel_value == 0) { 
 
      $("#test").empty(); // Resetting Form 
 
     } 
 
     else { 
 
      $("#test").empty(); //Resetting Form 
 
      create(sel_value); 
 
     } 
 
    }); 
 
function create(sel_value) { 
 
    for (var i = 1; i <= sel_value; i++) { 
 
     $("#test").append($("<label/>").text(i + ". Division Name"), $("<input/>", { 
 
      class: 'form-control', 
 
      type: 'text', 
 
      name: 'name_' + i 
 
     }), $("<br/>"), $("<input/>", { 
 
      type: 'text', 
 
      value: sel_value, 
 
      name: 'NumbDiv_' + i 
 
     }), $("<br/>"), $("<br/>")); 
 
    } 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="col-md-6"> 
 
    <label for="exampleSelect1">Number of Divisions</label> 
 
    <select class="form-control" id="selectDiv" name="select" > 
 
     <option value="0">0</option> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
    </select> 
 
</div> 
 

 
<div class="col-md-6" id="test"> 
 
</div>

источник

2016-11-26 16:52:26 Musa

Эй, спасибо большое за вашу помощь. Код, который вы указали, является правильным. Но как только я скопирую его на мой код загрузочного устройства, он больше не работает :( Ive обновил весь мой код (если вы запустите код во второй вкладке с ящиком я хочу создать входные файлы на основе выбора – romeromero123

Эй, спасибо за но я уже поменял его на свой код раньше. Он по-прежнему не работает. Кажется, он может получить значения из droptdown. Я просто обновил весь свой код, если вы хотите взглянуть :) – romeromero123

Я нашел ошибку ... Я должен был вставить идентификатор, прежде чем выбранный вариант вар sel_value = $ ('вариант: выбирается') Val();

Правильно: var sel_value = $ ('# selectDiv option: selected'). Val();

источник

2016-11-27 00:26:32 romeromero123

Добавить поле ввода на основе выбранного значения с помощью jquery

ответ

Смежные вопросы