Возвращаем дефолтное значение select где стоит selected, при попытке сменить на другой option и если вылезла ошибка валидации и мы не сменили option

Question

Задача простая очень, но я туплю ), не хватает знаний, вообщем учусь, строго не судите.

На странице есть селекты, их много, это селекты для смены статуса у заявки, по этому каждый селект привязан к свой заявке.

Когда я меняю статус у селекта одного из и если в контроллере проверку не проходит, то выводит в валидации ошибку, все ок, так и должно быть.

Меняю статус в селекте в одном из, далее срабатывает валидация, вылезает ошибка алерт, я закрываю и что я вижу, визуально, выбранный пункт в селекте выбран, тот на который я пытался сменить, будто он применился, я хочу его скинуть на дефолтный на тот где стоит selected (это когда статус не поменялся, когда ошибка вылезает), в валидацию где идет отработка вывода ошибки, я добавил $('#seld').prop("selected", false); срабатывает, но меняет у всех селектов, как быть? как-то через this можно сделать.

А надо чтоб не на всех срабатывало, а только на том где я менял статус в селекте.

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

 jQuery(document).ready(function($) {
   $(document).on('submit', '#statuseSave', function(event) {
     let form = this;
     event.preventDefault();
     let formLoad = new FormData($(form)[0]);
     formLoad.append('ajax', 1);
     $.ajax({
       url: $(this).attr('action'),
       type: 'POST',
       dataType: 'json',
       data: formLoad,
       beforeSend: function() {
         App.showLoader();
       },
       complete: function() {
         App.hideLoader();
       },
       success: function(d) {
         if (d.status == 'success') {
           App.hideLoader();
           alert(d.message);
         }
         if (d.status == 'error') {
           alert(d.message);
           //возвращаем дефолтное значение в селекте где selected стоит
           $('#seld').prop("selected", false);
         }
         App.hideLoader();
       },
       error: function() {
         App.hideLoader();
         alert(e.message);
         $('#seld').prop("selected", false);
       },
       cache: false,
       contentType: false,
       processData: false
     });
   });
 });

button{
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0 40px 0 40px;
  background: #8FEAA7;
  color: #212121;
  margin-top: 20px;
  border: 0;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="134">
  <form id="stSave" action="/admin/stSave/134" method="post">
    <select name="sel1" id="seld">
      <option value="0">Выберите</option>
      <option value="1" selected>Статус 1</option>
      <option value="2">Статус 2</option>
      <option value="3">Статус 3</option>
    </select>

    <button type="submit" name="submit">Применить</button>
  </form>
</div>

<br /><br />

<div id="135">
  <form id="stSave" action="/admin/stSave/135" method="post">
    <select name="sel2" id="seld">
      <option value="0">Выберите</option>
      <option value="1">Статус 1</option>
      <option value="2" selected>Статус 2</option>
      <option value="3">Статус 3</option>
    </select>

    <button type="submit" name="submit">Применить</button>
  </form>
</div>

<br /><br />

<div id="136">
  <form id="stSave" action="/admin/stSave/136" method="post">
    <select name="sel3" id="seld">
      <option value="0">Выберите</option>
      <option value="1">Статус 1</option>
      <option value="2" selected>Статус 2</option>
      <option value="3">Статус 3</option>
    </select>
    <button type="submit" name="submit">Применить</button>
  </form>
</div>

<br /><br />

<div id="137">
  <form id="stSave" action="/admin/stSave/137" method="post">
    <select name="sel4" id="seld">
      <option value="0">Выберите</option>
      <option value="1" selected>Статус 1</option>
      <option value="2">Статус 2</option>
      <option value="3">Статус 3</option>
    </select>
    <button type="submit" name="submit">Применить</button>
  </form>
</div>

Answer 1

Нашел решение, одно из решений.

$('#seld option').prop('selected', function() {
     return this.defaultSelected;
});

Answer 2

Оговорюсь сразу: я не смогу решить Вашу проблему полностью. Как обычно, решений несколько, и я лишь дам направление, куда бы я думал, если бы делал такое...
Итак:

На одной странице не должно быть элементов с одинаковым id.

Также я бы посоветовал пользоваться аттрибутом data.
Т.е. каждая форма будет переработана в такой вид:

<div data-actionid="136">
  <select>
    <option value="0">Выберите</option>
    <option value="1">Статус 1</option>
    <option value="2" selected>Статус 2</option>
    <option value="3">Статус 3</option>
  </select>
  <button type="button">Применить</button>
</div>

И изменить JS. Сделать event на каждую кнопку.

// привязываем событие к каждой кнопке внутри каждого <div[data-actionid]>
$(document).on('click', 'div[data-actionid] button', function() {
    // от кнопки идем по DOMу вверх до ближайшего контейнера с <div data-action>
    var divContainer = $(this).closest('[data-actionid]');

    // собираем из контейнера и его содержимого все, что нужно для последующего ajax
    var ajaxUrl = '/admin/stSave/' + divContainer.data('action');
    var dropdown = divContainer.find("select");
    var statusToBe = dropdown.find("option:selected").val();

    // создаем данные, которые уйдут в ajax
    var params = 'seld=' + statusToBe;

    // ну а далее уже идет ajax post
    $.ajax({
            url: ajaxUrl ,
            type: 'POST',
            data: params,
    });
});
// И теперь внутри success: function(d) {} Вам доступны и divContainer, и dropdown объекты
// dataType:json уберили, потому что теперь это обычный "параметарный" запрос

Удачи!

БЛОГ НА HUSL

Возвращаем дефолтное значение select где стоит selected, при попытке сменить на другой option и если вылезла ошибка валидации и мы не сменили option

Ответы (2 шт):