如何在選中復選框時更改 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>