Question

下拉列表已填充，但是当我第一次单击选择标记时它不显示所有列表，但显示按钮以滚动列表，第二次单击时，它显示完整列表。我附上了第一次点击和第二次点击行为和代码示例的图像。

Answer 1

由于您几乎没有提供适当的示例，因此如果您正在使用任何框架（如jQuery UI），则很难设置HTML。

基本上，您需要使用.preventDefault()然后return true组合来确保在显示<options>之前已完成AJAX。此示例不模仿AJAX调用，但确实需要时间来构建菜单。

示例：https://jsfiddle.net/Twisty/nn4m0c6r/

<强> HTML

<div>
  <label for="pro_id">Select Product</label>
  <select name="pro_id" id="pro_id">
    <option>Select Product</option>
  </select>
  <button>Search</button>
</div>

<强>的JavaScript

$(function() {
  var i = 0,
    r = Math.floor(Math.random() * 1000),
    opts = [];
  for (i; i <= r; i++) {
    opts.push({
      id: i,
      name: "Product Name " + i
    });
  }
  $("#pro_id").click(function(e) {
    e.preventDefault();
    $.ajax({
      url: "/echo/json/",
      dataType: "JSON",
      data: {
        json: JSON.stringify(opts)
      },
      type: "POST",
      success: function(data) {
        $.each(data, function(index, row) {
          $("#pro_id").append("<option value='" + row.id + "'>" + row.name + "</option>");
        });
      }
    });
    return true;
  });
});

您没有指定是否接收JSON数据，但根据您的代码，它看起来就是这样。在我看来，最好使用$.ajax()。当AJAX检索数据时，选择将打开，然后显示选项。所以会有一些滞后。如果可能，最好在页面呈现时或在ready之后收集数据。

在jquery的click函数的select标签中附加<option>不能正常工作

1 个答案: