在下拉菜单中选择选项后添加新的输入字段

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>