为什么select的选定值在动态下拉列表中发生变化？

Question

我有一些代码，其中存在两个选择框。一个选择是相对于第一个选择动态更改其值。第一个选择框是其中某些值来自使用PHP的后端。

<select class="form-control" name="tsm_id" id="tsm_id">
    <option value=""><b>SELECT TSM</b></option>
    <?php echo fill_year($connect); ?> 
</select>

第二个选择框取决于第一个选择框。在第一个框中选择任何值时，此选择框将动态更改其值。

<select class="form-control" name="sr_id" id="sr_id">
<option value="" selected>SELECT SR</option></select> 

但是问题是，当我在第一个选择框中选择任何值时，所选值SELECT SR消失了，只有来自后端的值才出现。我希望，如果有人从第一个选择框中选择值，那么SELECT SR保留在那里，作为选择值，其余值低于该值。我正在使用JavaScript代码附加这些选项。

$(document).ready(function(){  
    $('#tsm_id').change(function(){  
         var tsm_id = $(this).val();  
         $.ajax({  
              url:"http://localhost/salesforce/fetch_sr.php",  
             method:"GET",
             data:{tsm_id:tsm_id},  
              dataType:"json",                  
              success:function(data){  
              // var data=JSON.stringify(data);

              $('#sr_id').html('');
              for (var i in data)
              {               
                $("#sr_id").append("<option value="+data[i].employee_id+">"+data[i].employee_name+"</option>");
              }
          }
          });
     });
});

谁能告诉我我在这方面做错了什么。 我想要的是，如果有人从第一个选择框中选择值，那么第二个选择框与图像中的选择值设置为SELECT SR的图像相同，并且应该在其下方附加选项。

我想要这样的东西：

如果我要从第一个选择框中选择一个值，然后在第二个选择框中显示选项，而不是默认值，我就不会这样。

目前我是这样的：

Answer 1

 $('#sr_id').html('');

这将删除ajax成功的默认选项。 您可能要使用：

 $('#sr_id').html('<option value="" selected>SELECT SR</option>');

Answer 2

在循环出新选项之前，您当前正在删除ajax回调中的所有选项。
如果您更改

$('#sr_id').html(''); 

到

$('#sr_id').html('<option value="" selected>SELECT SR</option>'); 

该选项将始终是第一个（和选定的）值。