如何在选中复选框时更改 select 以输入文本？

Question

这是我第一次接触js所以请不要讨厌我我有这样的事情：

 function Zmiana(isChecked) { document.getElementById('test').type = 'text'; }

 <div class="dropdown"> <select id="test" name="producent" class="dropdown-select"> <option value="Apple">Apple</option> <option value="Samsung">Samsung</option> <option value="Lenovo">Lenovo</option> </select> <br> </div>

但它不起作用

Answer 1

您不会将select更改为文本框。 相反，您将同时拥有select和文本框。 该复选框将简单地确定显示哪个。

此外，您的select应该包含一个无效的首选选项，这样您就不会获得用户未选择的提交值。

 .hidden { display:none; }

 <input type="checkbox" id="check">Check to enter text directly <div class="dropdown"> <select id="test" name="producent" class="dropdown-select"> <option value="">--- Choose ---</option> <option value="Apple">Apple</option> <option value="Samsung">Samsung</option> <option value="Lenovo">Lenovo</option> </select> <input id="data" class="hidden"> </div> <script> let text = document.getElementById('data'); let check = document.getElementById("check"); let select = document.getElementById("test"); // You must set up your function to handle the // click event of the checkbox check.addEventListener("click", Zmiana); function Zmiana(){ // Add or remvoe the hidden class based on // whether it's already in use select.classList.toggle("hidden"); text.classList.toggle("hidden"); } </script>