5

ドロップダウンがあり、その中にオプションがあります。オプションをクリックすると、それぞれのフィールドが表示される必要があります。option1 == 1 つのテキスト ボックス option2 == 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>

option1 をクリックすると、1 つのフィールドが表示される必要があります。option2 の 2 つのフィールドで.. JavaScript と html は初めてです。友達を助けてください..

4

2 に答える 2

5

jqueryが使える場合は以下のようにできます。変更時に、表示するテキストボックスの数を含むデータ属性を選択します。次に、それらをループして追加します。

デモ

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"/>');
    }
});
于 2013-03-28T10:52:22.117 に答える
2 
<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';

    }
于 2013-03-28T10:39:23.130 に答える