用ajax請求填入select

Question

只有當我像這樣單擊 select 時，我才會使用數據庫中的數據加載 select：

 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>

我遇到的問題是，只有當我第二次點擊時，它才會顯示 select 中返回的數據。

這樣做的原因是因為我在css中設置了select的大小是這個width: 100%; ，但我想保留 select 中定義的大小，並顯示第一次點擊時返回的數據。

如果設置max-width: 100%; 已經在第一次點擊時返回數據，但是 select 會根據返回的數據調整大小，我希望 select 保持 100% 的大小，而不管從數據庫返回的數據如何。

Answer 1

從點擊事件變為焦點事件：

<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>

我已經檢查了這些元素，在您單擊該元素之前它們不會改變。

謝謝，