當對第一個表單進行任何更改時，使用jquery重置第二個表單。

Question

我在我的網站上有兩種形式（一種是woocommerce，另一種是重力形式）。第一種形式包含一個下拉選項和兩個選項。第二種形式包含兩個下拉字段。任何時候第一個表單變化我想第二個表單重置。我知道這聽起來很奇怪，但它的黑客。所以我需要一個改變功能和清晰的表單功能。假設用戶從第一個表單中選擇選項1，然後在表單2中的每個字段中選擇一個選項，然後用戶決定從第一個表單中選擇選項2。第二種形式需要重置。

Answer 1

嘗試一些本就行：

<form id="first"> 
    <select> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    </select> 
</form> 

<form id="second"> 
    <select> 
    <option value="">Select...</option> 
    <option value="a">Option A</option> 
    <option value="b">Option B</option> 
    </select> 
    <select> 
    <option value="">Select...</option> 
    <option value="c">Option C</option> 
    <option value="d">Option D</option> 
    </select> 
</form> 

綁定change事件處理程序<select>在#first形式：

$('#first select').change(function(){ 
    $('#second select').prop('selectedIndex',0); 
}); 

的change回調然後將所有<select>元素屬性在#second表格第一個<option>

查看http://jsfiddle.net/cC9sb/1/的工作示例。

Answer 2

或者到提示的回答，你可以簡單的使用

的Javascript

$('#first select').change(function(){ 
    $('#second')[0].reset(); 
}); 

$('#second')[0].reset();將重置表單中的所有元素（如果你是有輸入（文字，廣播，複選框線...））。

HTML

<p>Form 1</p> 
<form id="first"> 
    <select> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    </select> 
</form> 

<p>Form 2</p> 
<form id="second"> 
    <select> 
    <option value="">Select...</option> 
    <option value="a">Option A</option> 
    <option value="b">Option B</option> 
    </select> 
    <select> 
    <option value="">Select...</option> 
    <option value="c">Option C</option> 
    <option value="d">Option D</option> 
    </select> 
</form> 

Cue's updated fiddle