使用 javascript 选择通过 ajax 加载的下拉选项答案

【问题标题】：select a dropdown option loaded via ajax with javascript使用 javascript 选择通过 ajax 加载的下拉选项
【发布时间】：2021-12-28 13:24:31
【问题描述】：

我有这个下拉菜单，其中包含通过 AJAX 加载的选项。我正在尝试从下拉列表wpce-1 中自动选择第一个选项。第二个下拉列表 id wpce-1 仍未加载，因为需要从下拉列表 id wpce-0 中选择选项。

第二个下拉选项仅在选择wpce-0 选项时加载

$('#wpce-1 option:not([disabled]):nth(1)')
  .attr('selected', 'selected')
  .prop('selected', true)
  .trigger('change')
  .get(0)
  .click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpce-field">
  <label for="wpce-0">Make</label>
  <select class="wpce-field-term" id="wpce-0" data-level="0" data-required="yes" data-required-message="" data-type="term">
    <option value="">Make</option>
    <option value="9554">ALFA ROMEO</option>
    <option value="9642">ASTON MARTIN</option>
    <option value="9663">AUDI</option>
    <option value="9873">BENTLEY</option>
    <option value="9916">BMW</option>
    <option value="10240">CHEVROLET</option>
    <option value="10282">CHRYSLER</option>
  </select>
</div>
<div class="wpce-field">
  <label for="wpce-1">Model</label>
  <select class="wpce-field-term" id="wpce-1" data-level="1" data-required="yes" data-required-message="" data-type="term">
    <option value="">Model</option>
  </select>
</div>

【问题讨论】：

你的问题到底是什么？
@FarzBhullar 如何从未加载的下拉选项中选择一个选项
我认为我们需要查看您的其余代码才能更好地理解您的问题。
很难理解$('#wpce-1 option:not([disabled]):nth(1)') .attr('selected', 'selected') .prop('selected', true) .trigger('change') .get(0) .click(); 试图做什么，因为选择选项列表基本上是空的——除了这段代码“错误”之外

标签： javascript jquery ajax

【解决方案1】：

我不知道你在想什么，所以让我们在这里找点乐子吧。

也许您希望获得新模型，然后将它们作为选项附加。我把你获取模型（ajax？）的方式留给你，并使用一个假的名称值对数组，对其进行排序，然后通过触发将其作为新选项附加到此处

let fakemodels = [{
    name: "My Name",
    value: "12"
  },
  {
    name: "Wonder Wagon",
    value: "1234"
  },
  {
    name: "Beatnick Boat",
    value: "5634"
  },
  {
    name: "SuperView",
    value: "9834"
  },
  {
    name: "Guzzle",
    value: "1234455"
  },
  {
    name: "Wacky Wall",
    value: "8765"
  }
];

$('#wpce-0').on('change', function(event) {
  let selectedMake = $(this).val();
  console.log(selectedMake);
  $('#wpce-1').trigger('load-models', [selectedMake, fakemodels])
});
$('#wpce-1').on('load-models', function(event, make, newValues) {
  console.log("Make:", make);
  // optional sort
  newValues.sort(function(a, b) {
    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    // names must be equal
    return 0;
  });
  console.log("Models:", newValues);
//append our new "models"
  let newOptions = $.map(newValues, (k, v) => $("<option/>").val(k.value).text(k.name));
  //  console.log("newOptions:",newOptions);
  $(this).append(newOptions);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpce-field">
  <label for="wpce-0">Make</label>
  <select class="wpce-field-term" id="wpce-0" data-level="0" data-required="yes" data-required-message="" data-type="term">
    <option value="">Make</option>
    <option value="9554">ALFA ROMEO</option>
    <option value="9642">ASTON MARTIN</option>
    <option value="9663">AUDI</option>
    <option value="9873">BENTLEY</option>
    <option value="9916">BMW</option>
    <option value="10240">CHEVROLET</option>
    <option value="10282">CHRYSLER</option>
  </select>
</div>
<div class="wpce-field">
  <label for="wpce-1">Model</label>
  <select class="wpce-field-term" id="wpce-1" data-level="1" data-required="yes" data-required-message="" data-type="term">
    <option value="">Model</option>
  </select>
</div>

【讨论】：