用ajax请求填充选择

问题描述

只有当我像这样单击选择时，我才会使用数据库中的数据加载选择：

var cars = 
    [ { colour: 'red'},{ colour: 'white'},{ colour: 'black'} 
    ] 

let x = 0;
const campos_max = 10000;
$('#add_field').click (function(e) {
  e.preventDefault(); 
  if (x < campos_max) {
    $('#listas').append(`<div class="teste"><div class="form-group col-md-2" style="width: 20.833333325%; flex: 0 0 20.833%;max-width: 20.833%;"><select class="form-control2 spoilart1 Reffee${x}" name="Ref[]"><option></option></select><span class="form-highlight"></span><span class="form-bar"></span><label class="label3" for="Ref"></label></div></div>`);
  }
});
$(document).on("click",".spoilart1",function() {
  var html = $(`.Reffee${x}`);    
        
  cars.forEach(element => {
    html.append(`<option value="`+element+`">`+element+`</option>`);
  });
  x++;
});

.form-control2 {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="listas">
</div>

<button type="button" id="add_field" class="btn btn-warning caixa">
  <i class="fas fa-plus"></i>
</button>

我遇到的问题是，只有当我第二次点击时才显示选择中返回的数据。

之所以会这样，是因为我在css中用这行width: 100% ;设置了select的大小，但是我想保留select中定义的大小，并显示第一次点击返回的数据。

如果设置 max-width: 100%; 已经在第一次点击时返回数据，但是选择会根据返回的数据调整大小，我希望选择保持 100% 的大小，而不管从数据库。

解决方法

从点击事件变为焦点事件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
  .form-control2 {
    width: 100%;
  }
</style>

<div id="listas">
</div>

<button type="button" id="add_field" class="btn btn-warning caixa">
  <i class="fas fa-plus"></i>
</button>

<script>
  var cars =
      [ { colour: 'red'},{ colour: 'white'},{ colour: 'black'}
      ]

  let x = 0;
  const campos_max = 10000;
  $('#add_field').click (function(e) {
    e.preventDefault();
    if (x < campos_max) {
      $('#listas').append(`<div class="teste"><div class="form-group col-md-2" style="width: 20.833333325%; flex: 0 0 20.833%;max-width: 20.833%;"><select class="form-control2 spoilart1 Reffee${x}" name="Ref[]"><option></option></select><span class="form-highlight"></span><span class="form-bar"></span><label class="label3" for="Ref"></label></div></div>`);
    }
  });
  $(document).on("focus",".spoilart1",function() {
    var html = $(`.Reffee${x}`);

    cars.forEach(element => {
      html.append(`<option value="`+element+`">`+element+`</option>`);
    });
    x++;
  });
</script>

我已经检查了这些元素，并且在您单击该元素之前它们不会改变。

谢谢，

caa javascript