выпадающий вариант и действие

Question

У меня есть выпадающее меню, внутри которого есть варианты. При щелчке по опции он должен отображать поля соответственно. Как для option1 == один текстовое поле option2 == два текстового поля и так далее ...

<select id="dropdown"> 

    <option value="A">option1</option> 
    <option value="B">option2</option> 
    <option value="C">option3</option> 
    <option value="D">option4</option> 
</select> 

на щелкая option1 одно поле должно быть показано на рисунке. на option2 два поля. Я новичок в javascript и html. Пожалуйста, помогите друзьям ..

Answer 1

<select id="dropdown" onChange="showHide()"> 

    <option value="A">option1</option> 
    <option value="B">option2</option> 
    <option value="C">option3</option> 
    <option value="D">option4</option> 
</select> 


function showHide() 
{ 
    hideAll(); 
    var val = document.getElementById("dropdown").value; 

    if(val == "A") 
    document.getElementById("firstTextBoxId").style.display = 'block'; 
    else if(val == "B") 
    document.getElementById("secondTextBoxId").style.display = 'block'; 
    else if(val == "C") 
    document.getElementById("ThirdTextBoxId").style.display = 'block'; 
    else if(val == "D") 
    document.getElementById("FourthTextBoxId").style.display = 'block'; 

} 


function hideAll() 
    { 
     document.getElementById("firstTextBoxId").style.display = 'none'; 
     document.getElementById("secondTextBoxId").style.display = 'none'; 
     document.getElementById("thirdTextBoxId").style.display = 'none'; 
     document.getElementById("fourthTextBoxId").style.display = 'none'; 

    } 

Answer 2

Если вы можете использовать jquery, это можно сделать, как показано ниже. При изменении выберите атрибут данных, содержащий количество отображаемых текстовых полей. Затем зациклируйте их и добавьте.

Demo

Html:

<select id="dropdown"> 
    <option value="A" data-number="1">option1</option> 
    <option value="B" data-number="2">option2</option> 
    <option value="C" data-number="3">option3</option> 
    <option value="D" data-number="4">option4</option> 
</select> 
<div id="textBoxContainer"> 

</div> 

Javascript:

$('#dropdown').change(function(){ 
    $('#textBoxContainer').empty(); 
    var number = $(this).find('option:selected').attr('data-number'); 
    for (var i = 0; i < number; i++){ 
      $('#textBoxContainer').append('<input type="text"/>'); 
    } 
});