动态填充多个bootstrap下拉ajax js

// HTML代码
<select id="dropdown1" class="form-control"></select>
<select id="dropdown2" class="form-control"></select>

// JavaScript代码
$(document).ready(function() {
  // 使用Ajax获取数据并填充下拉菜单
  $.ajax({
    url: 'data.php',  // 数据源URL
    method: 'GET',
    dataType: 'json',
    success: function(data) {
      // 填充第一个下拉菜单
      var dropdown1 = $('#dropdown1');
      $.each(data.options1, function(index, option) {
        dropdown1.append($('<option></option>').attr('value', option.value).text(option.text));
      });

      // 填充第二个下拉菜单
      var dropdown2 = $('#dropdown2');
      $.each(data.options2, function(index, option) {
        dropdown2.append($('<option></option>').attr('value', option.value).text(option.text));
      });
    },
    error: function() {
      console.log('获取数据失败');
    }
  });
});

{
  "options1": [
    {"value": "1", "text": "选项1"},
    {"value": "2", "text": "选项2"},
    {"value": "3", "text": "选项3"}
  ],
  "options2": [
    {"value": "A", "text": "选项A"},
    {"value": "B", "text": "选项B"},
    {"value": "C", "text": "选项C"}
  ]
}