如何使用js或j query根据外部值限制selectpicker多个select

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入selectpicker插件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0/js/bootstrap-select.min.js"></script>

<!-- 外部值输入框 -->
<input type="text" id="externalValue">

<!-- select元素 -->
<select class="selectpicker" data-live-search="true">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select class="selectpicker" data-live-search="true">
  <option value="A">选项A</option>
  <option value="B">选项B</option>
  <option value="C">选项C</option>
</select>

<script>
$(document).ready(function() {
  // 监听外部值的变化
  $('#externalValue').on('input', function() {
    var value = $(this).val(); // 获取外部值

    // 根据外部值限制selectpicker的选项
    if (value === '1') {
      $('.selectpicker').selectpicker('val', '2'); // 选中选项2
      $('.selectpicker').selectpicker('refresh'); // 刷新selectpicker
    } else if (value === 'A') {
      $('.selectpicker').selectpicker('val', 'B'); // 选中选项B
      $('.selectpicker').selectpicker('refresh'); // 刷新selectpicker
    } else {
      $('.selectpicker').selectpicker('val', ''); // 清空选中项
      $('.selectpicker').selectpicker('refresh'); // 刷新selectpicker
    }
  });
});
</script>