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

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(){

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

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

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

  }else{

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

  }

});

Answer 2

你可以试试这种方式。

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

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

     $('#forshow1').append('<input type="text" name="other" class="form-control" id="myInput1" />');

  }else{

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

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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