드롭 다운 옵션 및 동작

Question

드롭 다운이 있고 그 안에 옵션이 있습니다. 옵션을 클릭하면 필드가 각각 표시되어야합니다. 은 마찬가지로 옵션 1 하나의 필드를 클릭에 등 옵션 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> 

에 대해 표시해야합니다. option2 2 개의 필드에 .. 자바 스크립트와 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> 

자바 스크립트 :

$('#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"/>'); 
    } 
});