我正在try 重置表单字段.我在JS中有2个Select2.如果我删除2个选项中任何一个的id,它将重置,否则它将保持不变.

$(document).ready(function() {
  $("#fieldName").select2();
  $("#actionName").select2();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<form>
  <table>
    <tbody id="table_achievements_tbody">
      <tr>
        <th>1</th>
        <th>
          <select class="form-control" id="fieldName" style="width:280px;">
            <option selected="selected" value="0">Field Name</option>
            <option value="1">Div 2</option>
            <option value="2"> Div 1</option>
          </select>
        </th>
        <th>
          <select class="form-control" id="actionName" style="width:280px;">
            <option selected>Select action</option>
            <option>Equals</option>
            <option>Greater than</option>
            <option>Less than</option>
          </select>
        </th>
        <th><input type="text" id="text2" class="form-control" placeholder="Enter Value" style="width:280px;"></th>
        <th style="width: 120px;">
          <select class="form-control sell" name="argSelect">
            <option value="Arg">Argument</option>
            <option value="AND">AND</option>
            <option value="OR">OR</option>
            <option value="ONLY">ONLY</option>
          </select>
        </th>
        <th style="width:54.58px;"></th>
      </tr>
    </tbody>
  </table>
<button type="reset" value="Reset" class="btn btn-secondary btn-sm">clear</button>
</form>

推荐答案

问题是因为"重置"按钮仅对表单控件有效.Select2库隐藏了原来的select元素,并创建了一个新的HTML struct ,以允许搜索和 Select 选项.这不是标准表单控件的一部分,因此不受reset操作的影响.

要解决此问题,可以挂接form元素的reset事件,并手动将Select2实例重置为其默认值,如下例所示.

还要注意,在下面的示例中,我将内联style规则移到了它们自己的样式表中.混合使用CSS/JS和HTML是一种不好的做法,因此应尽可能避免这种情况.

jQuery($ => {
  $('#fieldName, #actionName').select2();

  $('form').on('reset', () => {
    $('#fieldName').val('0').trigger('change');
    $('#actionName').val('Select action').trigger('change');
  });
});
#fieldName,
#actionName,
#text2 {
  width: 280px;
}

th.standard {
  width: 120px;
}

th.narrow {
  width: 54.58px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<form>
  <table>
    <tbody id="table_achievements_tbody">
      <tr>
        <th>1</th>
        <th>
          <select class="form-control" id="fieldName">
            <option selected="selected" value="0">Field Name</option>
            <option value="1">Div 2</option>
            <option value="2"> Div 1</option>
          </select>
        </th>
        <th>
          <select class="form-control" id="actionName">
            <option selected>Select action</option>
            <option>Equals</option>
            <option>Greater than</option>
            <option>Less than</option>
          </select>
        </th>
        <th>
          <input type="text" id="text2" class="form-control" placeholder="Enter Value">
        </th>
        <th class="narrow">
          <select class="form-control sell" name="argSelect">
            <option value="Arg">Argument</option>
            <option value="AND">AND</option>
            <option value="OR">OR</option>
            <option value="ONLY">ONLY</option>
          </select>
        </th>
        <th class="narrow"></th>
      </tr>
    </tbody>
  </table>
  <button type="reset" value="Reset" class="btn btn-secondary btn-sm">clear</button>
</form>

Javascript相关问答推荐

你怎么看啦啦队的回应?

当Redux提供程序访问Reduxstore 时,可以安全地从Redux提供程序外部调用钩子?

未加载css colored颜色 ,无法将div设置为可见和不可见

将Node.js包发布到GitHub包-错误ENEEDAUTH

向数组中的对象添加键而不改变原始变量

为什么可选参数的顺序会导致问题?

如何确保预订系统跨不同时区的日期时间处理一致?

如何防止ionic 输入中的特殊字符.?

如何访问此数组中的值?

基于产品ID更新条带产品图像的JavaScript命中错误

Node.js错误: node 不可单击或不是元素

在SuperBase JS客户端中寻址JSON数据

FireBase FiRestore安全规则-嵌套对象的MapDiff

找不到处于状态的联系人

将数据添加到数据库时不输出

Reaction:从子组件调用父组件中的函数

Oracle APEX-如何调用Java脚本函数

在一次操作中使用多个addToSet不适用于多个数组

.Remove()函数不适用于MongoDB

为什么它不记录任何东西在控制台?