jquery - 当对第一个表单进行任何更改时，使用 Jquery Reset 2nd form。

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

除了 Cue 的回答，您可以简单地使用

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 更新的小提琴