为什么动态选项看起来这么小

Why are the dynamic options appearing so small?

本文关键字：看起来 动态 选项 为什么      更新时间：2023-09-26

我有一个下拉菜单，可以在onfocus事件上动态添加选项（基于AJAX调用）。出于某种原因，我第一次点击框时，选项会浓缩成一个小框，但第二次它运行得很好。有人知道是什么原因导致了这种现象吗？（注意：因为它涉及AJAX，我不能插入一个可以模拟错误的fiddle，但我会发布代码本身）

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Remove Class | IMS</title>
        <link rel="stylesheet" type="text/css" href="../css/form.css"/>
    </head>
    <body>
        <form>
            <label for="class">Class:</label>
            <select name="class" onfocus="loadClasses(this)" id="drop" required>
                <option>Sample Value</option>
            </select>
            <hr/>
            <button type="button" onclick="sendData()">Remove Class</button>
        </form>
    </body>
</html>

JS代码：

function genDrop(e, json) {
    e.innerHTML = "";
    var data = eval("({data: " + json + "})");
    data = data.data;
    for (var i = 0; i < data.length; i++) {
        var option = data[i];
        var o = document.createElement("option");
        o.value = option.id;
        o.innerHTML = option.name;
        o.setAttribute("descript", option.descript);
        o.style.width = "500px !important"
        o.style.maxWidth = "200%";
        e.appendChild(o);
    }
}
function loadClasses(e) {
    var http = new XMLHttpRequest();
    http.onreadystatechange = function() {
        if (http.readyState === 4 && http.status === 200) {
            genDrop(e, http.responseText);
        }
    }
    http.open("GET", "getclasses.php", true);
    http.send();
}

使用onload而不是onfocus

<select name="class" onload="loadClasses(this)" id="drop" required>
  <option>Sample Value</option>
</select>
相关文章：