ドロップダウンメニューのオプションを選択した後に新しい入力フィールドを追加する

Question

ドロップダウンメニューで「その他」オプションを選択した後、ドロップダウンメニューの後に新しい入力フィールドを表示したいが、何も起こっていない。

<div style="margin-right:20px" id='degree'> 
    <label for='college_name'>Degree</lable></br> 
    <select style="width: 400px" class='degree-selected'> 
     <option>High school</option> 
     <option>Bachler's degree</option> 
     <option>Master's degree</option> 
     <option>Doctor of philosophy (Ph.D)</option> 
     <option id='hello'>other</option> 
    </select> 
</div> 


<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#hello").click(function(){ 
      alert('degree'); 
       $('#degree').append('<div style="margin-right:20px;"><label for="college_name"></lable><input type="text" placeholder=""></div>'); 
     }); 
    }); 
</script> 

Answer 1

次のように問題を解決してください。要約：それがない場合、値がドロップダウン要素試合

「その他」に選択した場合我々は、チェック

• 私たちは、ドロップダウン要素を選択し、jQueryのchange()方法
• を使用して、その上の変更を聞きます我々はすでにDOMに新しい入力フィールドを挿入したかどうかを確認
• 我々は、我々はjQueryのappendTo()メソッド使用して、入力フィールドを追加していない場合は

$(document).ready(function(){ 
 
    $('.degree-selected').change(function() { 
 
     var selectedItem = $(this).val(); 
 
     if (selectedItem === 'other') { 
 
      if (!$('#other-field').length) { 
 
       $('<input type="text" name="other-field" id="other-field">').appendTo('#form'); 
 
      } 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='degree'> 
 
\t <form id="form"> 
 
\t \t <label for='college_name'>Degree</label> 
 
\t \t <select class="degree-selected"> 
 
\t \t \t <option value="item-1">High school</option> 
 
\t \t \t <option value="item-2">Bachelor's degree</option> 
 
\t \t \t <option value="item-3">Master's degree</option> 
 
\t \t \t <option value="item-4">Doctor of philosophy (Ph.D)</option> 
 
\t \t \t <option value="other">Other</option> 
 
\t \t </select> 
 
\t </form> 
 
</div>