0

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

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中设置了select的大小width: 100% ;，但是我想保持select中定义的大小并显示第一次单击时返回的数据。

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

4

1 回答 1

0

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

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

我已经检查了这些元素，直到您单击该元素，它们才会改变。

谢谢，

于 2021-01-16T01:55:06.950 回答