Javascript 为什么select的选定值在动态下拉列表中得到更改？

我有一些代码，其中有两个选择框。一个select相对于第一个select动态更改其值。第一个选择框是其中一些值来自使用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消失，只有来自后端的值出现。我希望，如果有人从第一个选择框中选择值，然后选择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>");
              }
          }
          });
     });
});

谁能告诉我这件事我做错了什么。 我想要的是，如果有人从第一个选择框中选择了值，那么第二个选择框将保持与图像中相同的状态，并将“选定值”设置为“选择SR”，选项应附加在其下方

我想要这样的东西：

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

如果我从第一个选择框中选择一个值，然后从第二个显示选项的选择框中选择一个值，而不是默认值，则我不希望出现这种情况

现在我是这样的：

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

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

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

---

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

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

到

---

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

您可以添加更改第一个选择框时得到的响应吗？此答案应为重复答案。重复到哪个答案？如果您有副本，请在问题上加上标签。我们几乎同时发布了它们，由于解释略有不同，OP可以选择接受哪一个。我可以使用动态相关选择框获取有关价格估算的参考信息吗？如>美国国家->阿拉斯加州->运费：80美元