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

【问题标题】：After selecting option in dropdown menu append new input field在下拉菜单中选择选项后追加新的输入字段
【发布时间】：2017-01-26 01:12:49
【问题描述】：

在下拉菜单中选择“其他”选项后，我希望在下拉菜单后出现一个新的输入字段，但没有任何反应。

 <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>

【问题讨论】：

标签： javascript jquery input append

【解决方案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'>
	<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>

【讨论】：