Очистить выпадающий список Select2, заполненный с JSP / Ajax кнопкой только один раз - PullRequest
Новая
       14

Очистить выпадающий список Select2, заполненный с JSP / Ajax кнопкой только один раз

1 голос
/ 24 марта 2020

У меня есть страница, на которой можно сделать запрос к базе данных, применено 12 фильтров (каждый фильтр соответствует выпадающему списку select2).

При загрузке страницы выборки по умолчанию заполняются данными из контроллера java.

Пример со страницы jsp: 

<select id="selectFPA" name="selectFPA" form="formResult" class="form-control">
    <option selected>All the results</option>
    <c:forEach items="${fpaList}" var="fpaList">
        <option><c:out value="${fpaList.fpaname}" /></option>
    </c:forEach>
</select>

Но, если пользователь выбирает какое-либо значение в любом из фильтров, все фильтры обновляются на основе на выбранный выбор с помощью вызова AJAX.

Например, предположим, что у нас есть два фильтра выбора (раскрывающийся список):

Выбор 1 (группа животных): - Птицы - Млекопитающие

Выбор 2 (Имя животного): - Попугай - Собака

Если пользователь выбирает млекопитающих, будет вызвана функция AJAX, которая будет запрашивать базу данных и обновлять содержимое выбора 2, исключая вариант попугай. (И так до 12 фильтров).

Проблема возникает, когда я хочу очистить примененные фильтры и вернуться к исходному выбранному контенту (контент, который появляется по умолчанию каждый раз, когда страница загружается из java контроллер).

Я пробовал много вещей из похожих вопросов Stackoverflow без успеха.

Последнее, что я попробовал, было:

  1. Сохраните исходное содержимое выбора в переменной:

    const fpa = $("#selectFPA").find("option").clone();

  2. Событие Onclick (кнопка «Сбросить фильтры») 

        $("#ResetFilters").on("click",function() {
            //first we empty the content  
            $('#selectFPA').empty().trigger('change.select2');
            //original value injection
            $("#selectFPA").html(fpa),
            $('#selectFPA').trigger('change.select2')
        })

Это прекрасно работает, если я нажимаю кнопку один раз, если я нажимаю кнопку второй раз, селекторы случайным образом выбирают разные значения по умолчанию, и они ведут себя странно.

Я знаю, что это очень специфично c вопрос, а кто-нибудь может мне помочь? Что я делаю не так?

Спасибо.

1 Ответ

1 голос
/ 24 марта 2020

Я думаю, что согласно этому ответу вы не можете создать константу в jquery, поэтому только в первый раз она работает, а в следующий раз - нет. В качестве альтернативы решению может быть присвоено значение clone к некоторому div и извлекайте его в любое время, когда это необходимо. Как ниже: 

//call when page loads for the first time
$(document).ready(function() {
  //cloning
  var fpa = $("#selectFPA").find("option").clone();
  //assigning value to div
  $("#abc").html(fpa);


  $("#ResetFilters").on("click", function() {

    //getting clone value from div
    var c = $("#abc").find("option").clone();
    //first we empty the content  
    // $('#selectFPA').empty().trigger('change.select2');
    //original value injection
    $("#selectFPA").html(c);
    //$('#selectFPA').trigger('change.select2')
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectFPA" name="selectFPA" form="formResult" class="form-control">
  <option selected>All the results</option>
  <option>1</option>
  <option>2</option>

</select>

<button id="ResetFilters">Reset</button>
<div id="abc" style="display:none"></div>
...