我的脚本在我的表编辑模式下不起作用

Question

这是我在数据表内部的模态代码，这个模态用于编辑，但我的脚本只在第一行工作，但如果我想编辑第二行，脚本就不起作用。

<div class="form-group">

        <label for="leave_type">Type of Leave:</label>

        <select class="form-control mylist1" id="mylist1" name="leave_type">

            <option value="Vacation Leave">Vacation Leave</option>

            <option value="Maternity Leave" >Maternity Leave</option>

            <option value="Sick Leave" >Sick Leave</option>

            <option value="Paternity Leave" >Paternity Leave</option>

            <option value="Leave Without Pay" >Leave Without Pay</option>

            <option value="Authorized Absence" >Authorized Absence</option>

            <option value="Unauthorized Absence" >Unauthorized Absence</option>

            <option value="Other">Other</option>

        </select>

    </div>

    <div class="form-group">

        <div id="forshow1" class="forshow1">

        </div>

    </div>

还有我的脚本

  <script>

     $('#mylist1').change(function(){

        if( $(this).val() == 'Other'){

            $('#forshow1').append('<input type="text" name="other" class="form- 

            control" id="myInput1" />');

        }else{

            $('#myInput1').remove();

        }

    });

 </script>

Answer 1

试试这个$(document).on("change", "select", function(){&nbsp; if( $(this).val() == 'Other'){&nbsp; &nbsp; &nbsp;$('#forshow1').append('<input type="text" name="other" class="form-&nbsp;&nbsp; &nbsp; &nbsp;control" id="myInput1" />');&nbsp; }else{&nbsp; &nbsp; &nbsp;$('#myInput1').remove();&nbsp; }});

Answer 2

你可以试试这种方式。$('#mylist1').change(function(){&nbsp;&nbsp; &nbsp; if( $(this).val() == 'Other'){&nbsp; &nbsp; &nbsp;$('#forshow1').append('<input type="text" name="other" class="form-control" id="myInput1" />');&nbsp; }else{&nbsp; &nbsp; &nbsp;$('#myInput1').remove();&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label for="leave_type">Type of Leave:</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control mylist1" id="mylist1" name="leave_type">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Vacation Leave">Vacation Leave</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Maternity Leave" >Maternity Leave</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Sick Leave" >Sick Leave</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Paternity Leave" >Paternity Leave</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Leave Without Pay" >Leave Without Pay</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Authorized Absence" >Authorized Absence</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Unauthorized Absence" >Unauthorized Absence</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Other">Other</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <div id="forshow1" class="forshow1">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>