使用普通javascript关闭select标记

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);

只需在设置输入值后添加即可。