表示テキストボックスにより選択されたオプション、および新しいdivタグに

Question

を追加し、私はドロップダウンメニューが表示されます堅牢なソリューションを持つようにしたい、

<select id="sel"> 
<option value="Type 1">Type 1</option> 
<option value="Type 2">Type 2</option> 
</select> 

ユーザがオプションを選択した後、彼は、関連するテキストボックスが表示されるはずです。 （私は解決策を知っており、それは動作します）。

しかし、私はすべてのヘルプは大幅に（ずっとはるか）高く評価され

..クリックしたときに、ユーザーは、ドロップダウンメニューを参照してくださいどのオプションを選択するというように、関連するテキストボックスとを見なければならないことを一番下にあるボタンを必要とします..

jqueryのコード

$(function() { 
    //This hides all initial textboxes 
    $('label').hide(); 
    $('#sel').change(function() { 
     //This saves some time by caching the jquery value 
     var val = $(this).val(); 
     //this hides any boxes that the previous selection might have left open 
     $('label').hide(); 
     //This just opens the ones we want based off the selection 
     switch (val){ 
      case 'option1': 
      case 'option4': 
      case 'other': 
       $('#label1').show(); 
       break; 
      case 'option2': 
       $('#label1').show(); 
       $('#label2').show(); 
       $('#label3').show(); 
       break; 
      case 'option3': 
       $('#label1').show(); 
       $('#label2').show(); 
       break;  } 
    }); 

Answer 1

このフィドルを試してみてください。 http://jsfiddle.net/Hz9vF/

Answer 2

次のことを試してみてください。See this fiddle

head section

<script type="text/javascript"> 
$(document).ready(function() { 

$('#discountselection').hide(); 
$('#Yes').click(function() { 
$('#discountselection').show(); 
$('#discountselection').removeAttr('disabled'); 
}); 
}); 
</script> 
<script type="text/javascript"> 
     $(function() { 
//This hides all initial textboxes 
    $('label').hide(); 
$('#discountselection').change(function() { 
    //This saves some time by caching the jquery value 
    var val = $(this).val(); 
    //this hides any boxes that the previous selection might have left open 
    $('label').hide(); 
    //This just opens the ones we want based off the selection 
    switch (val){ 
     case 'option1': 
     case 'option4': 
     case 'other': 
      $('#label1').show(); 
      break; 
     case 'option2': 
      $('#label2').show(); 

      break; 
     case 'option3': 
      $('#label3').show(); 

      break;  } 
}); 
//I'm not really sure why these are here 
$("input") 
.focus(function() { 
    $(this).next("span").fadeIn(1000); 
}) 
.blur(function() { 
    $(this).next("span").fadeOut(1000); 
}); 
}); 

    </script> 

に以下のコードを入れて、あなたのbody section

<table> 
     <tr> 
      <td colspan="4"> 

    <select class="purple" name="discountselection" id="discountselection" disabled> 

    <option value="_">- select -</option> 
    <option value="option1">put your data here</option> 
     <option value="option2">put your data here</option> 
     <option value="option3">put your data here</option> 
    </select>   
      <br /> <br />   
       <input name="discount" type="button" id="Yes" value="click here to show drop down" /> 
        <label id="label1" for="option1"> 
    // 1st text box 
     <input type="text" id="option1" /> 
    </label> 
    <label id="label2" for="option2"> 

     //2nd text box 
     <input type="text" id="option2"/> 
    </label> 
    <label id="label3" for="option3"> 
     //3rd text box 
     <input type="text" id="option3" /> 
    </label> 

    </td> 

     </tr> 
    </table> 

に以下のコードを入れて、それがお役に立てば幸いです！