Question

我制作了一个包含多个选择的表单。当您选择一个选项时，将启用下一个select元素，并使用Ajax和PHP使用值更新它。

但是，如果您更改之前的选项，它只会在更改之后重置选择字段，而不是更改之后的所有选择。

那么如何清除最后一个更改元素下面的所有表单元素？

<form action="" method="post">
  Year: 
  <select onchange="updateField(this.value, 'brand', 'Year', 'Marke_vozila')">
    <option>Select year..</option>
    %year%
  </select>
  <br />
  Brand: 
  <select id="brand" onchange="updateField(this.value, 'model', 'Marke_vozila', 'Model_vozila')">
  </select>
  <br />
  Model: 
  <select id="model" onchange="updateField(this.value, 'type', 'Model_vozila', 'Tip_vozila')">
  </select>
  <br />
  Type: 
  <select id="type" onchange="updateField(this.value, 'uitvoering', 'Tip_vozila', 'izvedba_vozila')">
  </select>
  <br />
  Uitvoering: 
  <select id="uitvoering">
  </select>
  <br />
  <input type="submit" name="submit" class="submit" value="Submit" />
</form>

的Ajax：

    <script>
    function updateField(str, id, prevvalue, value)
    {
    if (str=="")
      {
      document.getElementById(id).innerHTML="";
      return;
      } 
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById(id).innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","inc/form_rest.php?q="+str+"&prevvalue="+prevvalue+"&value="+value,true);
    xmlhttp.send();
    }
</script>

Answer 1

为每个表单元素添加某种形式的编号标识符，例如inNum = 0，inNum = 1等。

在onchange处理程序中

获取此属性的值，然后选择inNum属性大于此值的每个元素并重置其值。

Answer 2

我没有看到JavaScript代码，但您可以使用jQuery nextAll()函数来选择所有剩余的兄弟姐妹。

例如：

$(current_field).nextAll('select').val('')

清除最后一个下面的表单字段

2 个答案: