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

Question

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

 <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

以下应该可以解决您的问题。总结：

我们 select 下拉元素并监听它的变化，使用 jQuery 的 change() 方法
我们检查下拉元素上的值 select 是否匹配 'other'
如果是，我们检查我们是否已经将新的输入字段插入 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>

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

After selecting option in dropdown menu append new input field

javascript

jquery

input

append