选中复选框时如何将选择更改为输入文本？

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