时间戳

首页 > 解决方案 > select2 使用 jquery 删除选择

jquery - select2 使用 jquery 删除选择

问题描述

我有一个带有 html 的选择 2 框：

<div class="col-md-9">
   <select class="form-control select2" style="width: 100%;" id="project_status" name="project_status" data-placeholder="Select a project status">
      <option value="" ></option>
      <option value="Pipeline" selected>Pipeline</option>
      <option value="Started">Started</option>
      <option value="Closed">Closed</option>
   </select>
</div>

我有这样的JS：

$("#project_status").select2({
    allowClear: true
});

我想清除此字段，以防我在另一个框中选择一个选项，如下所示：

$('#project_type').change(function() {
    project_type_value_check();
  });
function project_type_value_check() {
    project_type_val = $("#project_type option:selected").val();
    if (project_type_val == "Pre-sales")
    {

$('#project_status').val(null).trigger('change');
    }
  }

但奇怪的是，这样做时，我的行为非常奇怪。第一次加载页面时，会调用函数 project_type_value_check() 并很好地清除值。但是，如果我将框项目类型更改为项目，然后将项目状态设置为已启动，然后如果我尝试再次将项目类型设置为预售，则会出现错误：

Uncaught RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at Function.fa [as find] (jquery.min.js:2)
    at n.fn.init.find (jquery.min.js:2)
    at new n.fn.init (jquery.min.js:2)
    at n (jquery.min.js:2)
    at project_type_value_check (2019:4581)
    at HTMLSelectElement.<anonymous> (2019:4626)
    at HTMLSelectElement.dispatch (jquery.min.js:3)
    at HTMLSelectElement.r.handle (jquery.min.js:3)
    at Object.trigger

标签： jqueryjquery-select2

解决方案

我猜将选择框设置为 null 会导致问题，将其更改为empty.

$('#project_status').val(null).trigger('change');

至

$('#project_status').val('');
$('#project_status').select2().trigger('change');


$("#project_status").select2({
    allowClear: true
});

$('#project_type').change(function() {
    project_type_value_check();
  });
function project_type_value_check() {
    project_type_val = $("#project_type option:selected").val();
    if (project_type_val == "Pre-sales")
    {

       $('#project_status').val('');
       $('#project_status').select2().trigger('change');
    }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Select2 CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css">

<!-- Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js" type="text/javascript"></script>


<div class="col-md-9">
   <select class="form-control select2" style="width: 100%;" id="project_status" name="project_status" data-placeholder="Select a project status">
      <option value="" >--select--</option>
      <option value="Pipeline" selected>Pipeline</option>
      <option value="Started">Started</option>
      <option value="Closed">Closed</option>
   </select>
</div>

<select id="project_type">
  <option value=""></option>
  <option value="Pre-sales">Pre-sales</option>
</select>

推荐阅读