代码之家 › 专栏 › 技术社区 › nodedata

将id添加到html中的select[复制]后,表单中的下拉列表未重置

jquery html javascript

nodedata · 技术社区 · 3 年前

我正在尝试重置表单字段。我在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>

1 回复 | 直到 3 年前

Rory McCrossan Hsm Sharique Hasan 3 年前

问题是因为“重置”按钮仅对表单控件有效。Select2库隐藏原始 select 元素并创建一个新的HTML结构,以允许搜索和选择选项。这不是标准表单控件的一部分,因此不受 reset 行动

要解决此问题,您可以连接到 重置 的事件 form 元素并手动将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>