Question

我有一个网络表单，其中包含许多输入和一些JavaScript。我试图根据以前的选择隐藏某些字段。该代码将隐藏字段没有问题。但是我试图清除在隐藏之前在字段中输入的所有值。

用例是：用户在下拉列表中选择1-6之间的数字。显示了相应数量的文本框。问题是，用户可以填充所有6个文本框，然后将下拉列表更改为2，因此隐藏了4个。隐藏的字段仍将保留其值。

这是我尝试过的代码：

function renderStudentFields(quantity) {
    for (let i = 1; i <= 6; i++) {
        if (i <= quantity) {
            document.getElementById(`s${i}`).value = '';
            document.getElementById(`s${i}`).style.display = 'block';
        } else {
            document.getElementById(`s${i}`).style.display = 'none';
        }
    }
}

我尝试直接调用代码： document.getElementById( s1 ).value = '';

但是无论文本框值是否保留。

对此我可以采取其他方法的任何想法吗？

Answer 1

我认为您的做法是正确的，我只是认为您应该将document.getElementById( s $ {i} ).value = '';移至else陈述中。您可以检查here

const changeOptions = event => {
  const { value } = event.target;

  if (value) {
    for (let i = 1; i <= 6; i++) {
      if (i <= value) {
        document.getElementById(`s${i}`).style.display = "";
      } else {
        document.getElementById(`s${i}`).style.display = "none";
        document.getElementById(`s${i}`).value = "";
      }
    }
  } else {
    for (let i = 1; i <= 6; i++) {
      document.getElementById(`s${i}`).style.display = "";
    }
  }
};

window.onload = function() {
  document.getElementById("options").addEventListener("change", changeOptions);
};

#form {
  display: flex;
  flex-direction: column;
}

<div>
  <select id="options">
    <option value="">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  <select>
   <form id="form">
     <label>Input 1<input type="text" id="s1" /></label>
     <label>Input 2<input type="text" id="s2" /></label>
     <label>Input 3<input type="text" id="s3" /></label>
     <label>Input 4<input type="text" id="s4" /></label>
     <label>Input 5<input type="text" id="s5" /></label>
     <label>Input 6<input type="text" id="s6" /></label>
   </form>
</div>

Answer 2

function renderStudentFields(e){
    const qty = e.target.value;
    [1,2,3,4,5,6].forEach(idx => {
        const field = document.getElementById(`s${idx}`);
        field.style.display = 'none';
        field.value = idx === qty ? field.value : '';
        if(idx <= qty){
            field.style.display = 'block';
        }
    });
}

window.onload = function(){
    document.getElementById("boxes").addEventListener("change", renderStudentFields);
};

<div>
    <select id="boxes">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    <select>
    <form id="form" style="display:flex;flex-direction: column;">
        <input type="text" id="s1" placeholder="s1" />
        <input type="text" id="s2" placeholder="s2" />
        <input type="text" id="s3" placeholder="s3" />
        <input type="text" id="s4" placeholder="s4" />
        <input type="text" id="s5" placeholder="s5" />
        <input type="text" id="s6" placeholder="s6" />
    </form>
</div>

无法使用JS

2 个答案: