在下拉菜單中選擇選項後添加新的輸入字段

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>