用 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 中用这一行 width: 100% ; 设置了 select 的大小，但我想保留 [=] 中定义的大小33=]并显示第一次点击返回的数据。

如果设置 max-width: 100%; 已经 returns 第一次点击时的数据，但是 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>

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

谢谢，

用 ajax 请求填写 select

Fill select with ajax request

javascript

caa