使用jquery添加基於選定值的inputfield

我試圖根據下拉列表中選定的值添加輸入字段。我想在<div>上附加輸入字段。我真的嘗試了很多，但我找不到錯誤。也許有人在這個社區看到的它已經...使用jquery添加基於選定值的inputfield

$(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

有id爲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

嘿，非常感謝您的幫助。您提供的代碼是正確的。但只要我複製它在我的bootrap代碼它不再工作了:( 我更新了我的整個代碼（如果你在第二個選項卡上運行代碼稱爲框我想根據選擇創建輸入文件 – romeromero123

嘿謝謝編輯，但我已經改變了它在我的代碼之前，它仍然不起作用，它似乎可以從droptdown得到的值，我只是更新了我的整個代碼，如果你想看看:) – romeromero123

我發現我的錯......我不得不插入ID選項中選擇 VAR sel_value = $（ '選項：選擇'）之前VAL（）;

正確的：var sel_value = $（'＃selectDiv option：selected'）。val（）;

來源

2016-11-27 00:26:32 romeromero123

使用jquery添加基於選定值的inputfield

回答

相關問題