javascript - 在下拉菜单中选择选项后 append 新的输入字段

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() 方法 append 输入字段

$(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'>
	<form id="form">
		<label for='college_name'>Degree</label>
		<select class="degree-selected">
			<option value="item-1">High school</option>
			<option value="item-2">Bachelor's degree</option>
			<option value="item-3">Master's degree</option>
			<option value="item-4">Doctor of philosophy (Ph.D)</option>
			<option value="other">Other</option>
		</select>
	</form>
</div>