我有一个包含许多服务选项的庞大数组。我希望用户能够输入这些服务名称的一部分，并使用正常输入选择其中之一。由于数组很大，我不想像这样输入每个选项:

<div>
      <label>Type the service name:</label>
      <input type="text" list="services" />
      <datalist id="services">
         <option value="service1">
         <option value="service2">
         <option value="service3">
         <option value="service4">
         ...
         <option value="service123">
      </datalist>
</div>

所以我尝试使用 JavaScript 来为我做这件事。我试过这个:

JavaScript

<script>
        // Services List
        var listServices = ["SEADM", "SECAP", "SEFPG", "SEMAN", "SEPAS", "SELIC", "SEINF", "SEGED",
            "SEGES", "SEEOR",
            "SECON", "SEFIN", "SEIMP", "SECIF", "SETCE", "SECOA", "SEAFI", "SECAC", "SECIN", "SEGEC",
            "SEABE",
            "SEBEX", "SEBFP", "SEBPP", "SEPFT", "SECAT", "SEADM (DABS)", "SEADM (DEHS)", "SEADN (DCOI)",
            "SEMAD",
            "SECCO", "SEGPT", "SEITI", "SEGTI", "SEOTI", "SESIE", "SESIF", "SEPRE"
        ];

        var option = ""
        for (i = 0; i < listServices.length; i++) {
            option += '<option value="' + listServices[i] + '">';

        }
        $("options").html(option);
</script>

HTML

<div class="form-group">
                    <label for="sel1">Type the acronym of the Service:</label>
                    <input class="select-css" type="text" list="services" />
                    <datalist id="services">
                        <div id="options">
                        </div>
                    </datalist>
</div>

PS:我也尝试过不使用 <div id="options">尝试将其应用于 <datalist id="services">使用$("services").html(option);

编辑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var listServices = ["SEADM", "SECAP", "SEFPG", "SEMAN", "SEPAS", "SELIC", "SEINF", "SEGED", "SEGES", "SEEOR",
            "SECON", "SEFIN", "SEIMP", "SECIF", "SETCE", "SECOA", "SEAFI", "SECAC", "SECIN", "SEGEC", "SEABE",
            "SEBEX", "SEBFP", "SEBPP", "SEPFT", "SECAT", "SEADM (DABS)", "SEADM (DEHS)", "SEADN (DCOI)", "SEMAD",
            "SECCO", "SEGPT", "SEITI", "SEGTI", "SEOTI", "SESIE", "SESIF", "SEPRE"
        ];

        var option = "";

        for (let i = 0; i < listServices.length; i++) {
            option += '<option value="' + listServices[i] + '">';
        }

        document.getElementById("options").innerHTML = option;
    </script>
</head>

<body>
        <div class="form-group">
                <label for="sel1">Type the acronym of the Service:</label>
                <input class="select-css" type="text" list="services" />
                <datalist id="services">
                  <div id="options"></div>
                </datalist>
        </div>
</body>

</html>

最佳答案

您需要正确使用JQuery selector by id就像 $("#options").html(option);

示例:

var listServices = ["SEADM", "SECAP", "SEFPG", "SEMAN", "SEPAS", "SELIC", "SEINF", "SEGED", "SEGES", "SEEOR", "SECON", "SEFIN", "SEIMP", "SECIF", "SETCE", "SECOA", "SEAFI", "SECAC", "SECIN", "SEGEC", "SEABE", "SEBEX", "SEBFP", "SEBPP", "SEPFT", "SECAT", "SEADM (DABS)", "SEADM (DEHS)", "SEADN (DCOI)", "SEMAD", "SECCO", "SEGPT", "SEITI", "SEGTI", "SEOTI", "SESIE", "SESIF", "SEPRE"];

var option = "";

for (let i = 0; i < listServices.length; i++)
{
    option += '<option value="' + listServices[i] + '">';
}

$("#options").html(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="sel1">Type the acronym of the Service:</label>
  <input class="select-css" type="text" list="services" />
  <datalist id="services">
    <div id="options"></div>
  </datalist>
</div>

如果您想避免 JQuery，您可以使用 getElementById() :

var listServices = ["SEADM", "SECAP", "SEFPG", "SEMAN", "SEPAS", "SELIC", "SEINF", "SEGED", "SEGES", "SEEOR", "SECON", "SEFIN", "SEIMP", "SECIF", "SETCE", "SECOA", "SEAFI", "SECAC", "SECIN", "SEGEC", "SEABE", "SEBEX", "SEBFP", "SEBPP", "SEPFT", "SECAT", "SEADM (DABS)", "SEADM (DEHS)", "SEADN (DCOI)", "SEMAD", "SECCO", "SEGPT", "SEITI", "SEGTI", "SEOTI", "SESIE", "SESIF", "SEPRE"];

var option = "";

for (let i = 0; i < listServices.length; i++)
{
    option += '<option value="' + listServices[i] + '">';
}

document.getElementById("options").innerHTML = option;

<div class="form-group">
  <label for="sel1">Type the acronym of the Service:</label>
  <input class="select-css" type="text" list="services" />
  <datalist id="services">
    <div id="options"></div>
  </datalist>
</div>

关于javascript - 尝试使用循环将数组中的所有项目放入文本输入数据列表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56447382/

javascript - 尝试使用循环将数组中的所有项目放入文本输入数据列表中

示例:

上一篇：javascript - Commander-js 的强制参数

下一篇：javascript - 如何将 WEBP 图像另存为其他类型