javascript - 为什么 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>');