根據下拉選擇生成輸入框

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

你的代碼的工作，但爲什麼不顯示隱藏？這是不是每次都

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

操縱DOM快得多

您的版本：

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