Javascript创建的下拉列表在一行上展开

Question

我在工作中创建了一个动态创建的下拉列表。我的HTML代码很简单

<SELECT id="competitors">
  <OPTION value="0">All values</OPTION>
</SELECT>

我已经创建了一个js函数，它在焦点上执行适当的查询并附加html。

success: function (data) {
   $(id).append(data.arr);
 )

当我循环一个数组时，它会附加纯HTML

$text .= "<OPTION value=\"$id\">$name</OPTION>";

然后我对字符串进行编码

$str['arr'] = $text;
echo json_encode($str);

dropdown的CSS只有width属性，而这个dropdown是遵循相同规则(使用on focus函数动态创建的)的。

问题是，当我在追加数据后单击下拉菜单时，它不会展开。它仍然是一个带有导航栏的单行下拉框，所以当我在获取数据时单击它时，它看起来就像that，在响应之后，而不是完整的下拉列表之后，我得到的是that

可能会有帮助的信息是:1.请求可能需要很长时间(2-10秒)，因为我必须连接多个表，并对数千行的一些行进行分组。2.当我得到带有导航栏的1行下拉菜单的响应后，如果我重新单击它，它就会像应该的那样展开。

有什么想法吗？

Answer 1

您可以使用javascript来做类似的事情。

html：

<select id="competitors">
    <option value="0"> All values </option>
</select>

javascript：

document.getElementById('competitors').options[competitors.options.length]
 = new Option('theName', 'the value');

这里有一个小提琴：https://jsfiddle.net/f5a81Lv6/