select2 используйте jquery для удаления выделения - PullRequest
Новая
       4

select2 используйте jquery для удаления выделения

1 голос
/ 28 июня 2019

У меня есть поле выбора 2 с html: 

<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

1 Ответ

0 голосов
/ 28 июня 2019

Я полагаю, что установка поля выбора на ноль вызывает проблему, замените его на 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>
...