下拉選項和操作

Question

我有一個下拉和裏面，我有選擇。點擊該選項時，它必須分別顯示字段。 喜歡 選項1 ==一個文本框 選項2 ==兩個文本框等等...

<select id="dropdown"> 

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

上點擊選項1一個字段必須證明。在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"/>'); 
    } 
});