ドロップダウン選択に基づいて入力ボックスを生成する

Question

ドロップダウンリストから選択し、その上に適切なラベルを付けて入力ボックスを動的に生成したいと考えています。例：

私はドロップダウンから学校を選択した場合：私は、ドロップダウンリストから個人を選択した場合

<label>Enter School name:</label> 
<input name="name"> 

：

<label>Enter Individual name:</label> 
<input name="firstName"> 
<input name="lastName"> 

$('#elementreg').change(function() { 
 

 
    $('#input-holder').empty(); 
 
    if ($(this).val() == "individual") { 
 
    $('#input-holder').append('<input type="text" name="input" value="test" >'); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="input-holder"></div> 
 
<select class="medium" id="elementreg" name="youare"> 
 
    <option value="" selected="selected"></option> 
 
    <option value="individual">For Yourself</option> 
 
    <option value="school">School</option> 
 
    <option value="group">Group</option> 
 
    <option value="studio">Studio</option> 
 

 
</select>

Answer 1

あなたのコードの作品が、なぜありません表示/非表示？これは、DOMたび

$("#elementreg").on("change", function() { 
 
    var val = $(this).val(); 
 
    $(".types").hide().find('input:text').val(''); // hide and empty 
 
    if (val) $("#" + val).show(); 
 
});

.types { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="medium" id="elementreg" name="youare"> 
 
    <option value="" selected="selected"></option> 
 
    <option value="individual">For Yourself</option> 
 
    <option value="school">School</option> 
 
    <option value="group">Group</option> 
 
    <option value="studio">Studio</option> 
 

 
</select> 
 

 
<div class="types" id="individual"> 
 
    <label>Enter Individual name:</label> 
 
    <input name="firstName"> 
 
    <input name="lastName"> 
 
</div> 
 
<div class="types" id="school"> 
 
    <input .... /> 
 
</div>

を操作するよりもはるかに高速である

あなたのバージョン：私はそのように持っていたが、私はなっていませんでした

$("#elementreg").on("change", function() { 
 
    var val = $(this).val(), $div = $("#input-holder"),fields=" "; 
 
    switch (val) { 
 
     case "individual": 
 
     fields='<label>Your name: </label><input type="text" /><input type="text"/>'; 
 
     break; 
 
     case "school": 
 
     fields='<label>School: </label><input type="text" />'; 
 
     break; 
 
    } 
 
    $div.html(fields); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="input-holder">&nbsp;</div> 
 
<select class="medium" id="elementreg" name="youare"> 
 
    <option value="" selected="selected"></option> 
 
    <option value="individual">For Yourself</option> 
 
    <option value="school">School</option> 
 
    <option value="group">Group</option> 
 
    <option value="studio">Studio</option> 
 
</select>