使用 vanilla javascript 关闭选择标签

Question

我需要一个自定义标签。所以我把它设计成：

    <span class="language-selector" id="myspan">
        <input id="display_language" value="EN" readonly>
        <span tabindex="-1" class="downarrow" id="myarrow"></span>
        <select size="10" id="selected_language" class="language_dropdown">
            <option class="language-option" value="EN">English</option>

            <option class="language-option" value="FR">French (Francais)</option>

            <option class="language-option" value="DE">German (Deutsch)</option>
        </select>
    </span>

我在上面使用了自定义 CSS。对于 JS，我使用以下代码从下拉列表中选择选项：

    var langSelec = document.querySelectorAll(
  ".language-selector .language_dropdown"
);
langSelec.forEach((element) => {
  element.addEventListener("change", function () {
    let children = element.parentNode.children;
    // console.log(children);
    var d = children[2].value;
    children[0].value = d;
  });
});

它工作正常。目前，只有当我在元素外部单击或从中选择一个选项时，下拉菜单才会关闭。

问题：

再次单击该元素时，我需要关闭下拉菜单。谁能帮帮我！

Answer 1

我不知道这是否是你想要的，但是这一行通过将大小设置为 1 来“关闭”：

document.querySelector(".language_dropdown").setAttribute("size", 1);

设置输入值后添加即可。