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

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>

第二个选择框取决于第一个选择框。 When any value in the first box is selected this select box change its value dynamically.

<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>'); 

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