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

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>