0

複数の選択を含むフォームを作成しました。オプションを選択すると、次の選択要素が有効になり、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>

アヤックス:

    <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>
4

2 に答える 2

0

各フォーム要素に、たとえばinNum = 0、inNum=1などの番号付き識別子の形式を順番に指定します。

onchangeハンドラーでこの属性の値を取得し、この値よりも大きいinNum属性を持つ各要素を選択して、その値をリセットします。

于 2013-01-27T00:28:50.730 に答える
0

JavaScriptコードは表示されませんが、jQuery nextAll（）関数を使用して、残りのすべての兄弟を選択できます。

例えば：

$(current_field).nextAll('select').val('')
于 2013-01-27T00:30:42.227 に答える