Как сжать код jQuery в коде меньшего размера c?

Question

У меня есть код, который прекрасно работает, потому что он жестко закодирован, но очень большой. Я хотел бы упростить этот код, чтобы сделать его общим и, конечно, меньшим. Кто-нибудь знает, как это сделать? Поскольку он настолько большой, я уменьшу его для этого вопроса.

    var theform1 = $('#form1').find('.state option');        
    var stateForm1 = Object.keys(localStorage).filter(key => key.endsWith('-state1'));
    var stateChoice1 = JSON.parse(localStorage.getItem(stateForm1));

    var theform2 = $('#form2').find('.state option');        
    var stateForm2 = Object.keys(localStorage).filter(key => key.endsWith('-state2'));
    var stateChoice2 = JSON.parse(localStorage.getItem(stateForm2));

    var theform3 = $('#form3').find('.state option');        
    var stateForm3 = Object.keys(localStorage).filter(key => key.endsWith('-state3'));
    var stateChoice3 = JSON.parse(localStorage.getItem(stateForm3));

    if (localStorage.getItem(stateForm1)) {            
        $(theform1).empty();
        $(theform1).val(stateChoice1).append(`<option value="${stateChoice1}">${stateChoice1}</option>`).trigger('window.load');                    
    }; 

    if (localStorage.getItem(stateForm2)) {            
        $(theform2).empty();
        $(theform2).val(stateChoice2).append(`<option value="${stateChoice2}">${stateChoice2}</option>`).trigger('window.load');                    
    };

    if (localStorage.getItem(stateForm3)) {            
        $(theform3).empty(); 
        $(theform3).val(stateChoice3).append(`<option value="${stateChoice3}">${stateChoice3}</option>`).trigger('window.load');

    };        

Разметка HTML выглядит следующим образом:

    <form id="form1" autocomplete="off">
   <select id="country1" class="country" name="country">
    <?php include("countryAjaxData.php"); ?> 
   </select> 
   <select id="state1" class="state" name="state">
    <option value="" selected="selected">Select state</option>
   </select> 
   <select id="city1" class="city" name="city">
    <option value="" selected="selected">Select city</option> 
   </select>
  </form>
  <form id="form2" autocomplete="off">
   <select id="country2" class="country" name="country">
    <?php include("countryAjaxData.php"); ?> 
    </select> 
   <select id="state2" class="state" name="state">
    <option value="" selected="selected">Select state</option>
   </select> 
   <select id="city2" class="city" name="city">
    <option value="" selected="selected">Select city</option> 
   </select>
  </form>
  <form id="form3" autocomplete="off">
   <select id="country3" class="country" name="country">
    <?php include("countryAjaxData.php"); ?> 
   </select> 
   <select id="state3" class="state" name="state">
    <option value="" selected="selected">Select state</option>
    </select> 
   <select id="city3" class="city" name="city">
    <option value="" selected="selected">Select city</option> 
   </select>
  </form>

Answer 1

Возможно, вы ищете эту сжатую версию:

$('#form1,#form2,#form3').each(function () {
    var index = this.id.substring(this.id.length - 1, this.id.length);
    var stateForm = Object.keys(localStorage).filter(key => key.endsWith('-state' + index));
    var stateChoice = JSON.parse(localStorage.getItem(stateForm));

    if (localStorage.getItem(stateForm)) {
        var theform = $(this).find('.state option').empty();

        theform.val(stateChoice)
                .append(`<option value="${stateChoice}">${stateChoice}</option>`)
                .trigger('window.load');
    }
});

---

Если у вас более 10 форм с индексом, увеличивающимся с 1 до 99 или 999 ... Вы можете отредактировать способ назвать идентификатор вашей формы следующим образом: form01 form02 form03 или form001 form002 form003 ...

Тогда, поскольку все имена идентификаторов начинаются с form, вы можно обновить селекторы следующим образом:

Изменение $('#form1,#form2,#form3') на $('[id^="form"]'). Этот селектор означает: выбор некоторого элемента (ов), который содержит идентификатор, начинается с form.

Наконец, если идентификатор вашей формы следует за 2 цифрами (form01), вы обновляете строку, чтобы получить индекс to:

var index = this.id.substring(this.id.length - 2, this.id.length);

Вы можете сделать то же самое для идентификаторов, следующих за 3 цифрами (form001):

var index = this.id.substring(this.id.length - 3, this.id.length);

Answer 2

L oop по всем select.state и получите номер из родительской формы.

Что-то вроде:

$('select.state').each(function() {
  const $sel = $(this),
    formNum = $sel.closest('form').attr('id').replace('form', ''),  
    stateForm = Object.keys(localStorage).find(key => key.endsWith(`-state${formNum }`)),
    stateChoice = localStorage.getItem(stateForm);


  if (stateChoice) {
    $sel.append(new Option(stateChoice. stateChoice))
      .val(stateChoice)
      .trigger('window.load');
  }

})

Примечание. Я изменил filter() на find() для ключей, так как фильтр возвращает массив