ドロップダウンメニューで選択されている項目に応じて、テキストボックスを表示するように変更するにはどうすればよいですか？

Question

私は学校の科目リストを含むドロップダウンメニューを持っています。最後のオプションは「新しい科目を追加する」ので、そのオプションを選択すると、テキストボックスが表示されます。

私のHTMLフォームは次のようになります。私は仕事にこれを取得しようとしている年齢を費やしている（私は唯一の関連ビットが含まれている、もう少しものがそこにあり

<form method="post" action="createQuestion.php" name="cq"> 
    <select name="subject" id="subject"> 
     <option value="biology">Biology</option> 
     <option value="maths">Maths</option> 
     <option value="economics">Economics</option> 
     <option value="newSub" <?php if($subject == "newSub1") { echo "SELECTED"; } ?>> Add New Subject </option> 
    </select> 
    <input type="text" name="newSubtxt" ID="newSubtxt" style="visibility:hidden"> 
</form> 

。 JavaScriptを使用して、私はちょうどそれがすべてで動作させることはできません。

これは私が書いたjsのですが、

function addSubject(){ 
      newSub = document.getElementById('newSub').name 
      selectedSubject = document.getElementById('subject').value 
       if (selectedSubject == newSub){ 
       document.getElementById(newSubtxt).style.display = 'block'; 
      }} 

を動作しません。

誰かがjavascriptで私を助けることができたら、それはうまくいくので、私はとても感謝しています。

<input type="text" name="newSubtxt" id="newSubtxt" style="display: none" /> 

とあなたのJS：事前に感謝:)

Answer 1

変更

<input type="text" name="newSubtxt" ID="newSubtxt" style='display:none;'> 

とテキストボックスのスタイル私はあなたの問題を解決するためのjQuery（JavaScriptライブラリ）を使用していました。

$(document).ready(function() { 
    $('#subject').change(function(){ 
    if($('#subject').val()=='newSub') 
     $('#newSubtxt').show(); 
    else 
     $('#newSubtxt').hide(); 
    }); 
}); 

私jsfiddle

Answer 2

はにあなたの目に見えない入力を変更

function addSubject() { 
    var selectedSubject = document.getElementById('subject').value; 
    if (selectedSubject == 'newSub') { 
     document.getElementById('newSubtxt').style.display = 'block'; 
    } 
} 

また、私jsfiddleを参照してください。