मेरे पास एक कोड है जो पूरी तरह से ठीक काम करता है क्योंकि यह हार्डकोडेड है लेकिन बहुत बड़ा है। मैं इसे सामान्य और निश्चित रूप से छोटा बनाने के लिए इस कोड को सरल बनाना चाहता हूं। क्या किसी को भी पता है की यह कैसे किया जाता है? चूंकि यह इतना बड़ा है, इसलिए मैं इस प्रश्न के लिए इसे छोटा कर दूंगा।

    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');

    };        

एचटीएमएल मार्कअप इस प्रकार है:

    <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>
1
kejo 19 जिंदा 2020, 20:03

2 जवाब

सबसे बढ़िया उत्तर

शायद आप इस संकुचित संस्करण की तलाश में हैं:

$('#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');
    }
});

यदि आपके पास १० से अधिक फॉर्म हैं जिनकी अनुक्रमणिका १ से बढ़कर ९९ या ९९९ हो गई है... आप अपने फॉर्म आईडी को नाम देने का तरीका संपादित कर सकते हैं: form01 form02 form03 या form001 form002 form003...

फिर, क्योंकि सभी आईडी नाम form से शुरू होते हैं, आप चयनकर्ताओं को इस तरह अपडेट कर सकते हैं:

$('#form1,#form2,#form3') को $('[id^="form"]') में बदला जा रहा है। उस चयनकर्ता का अर्थ है: कुछ तत्वों का चयन करना जिसमें आईडी है form से शुरू होता है।

अंत में, यदि आपका फॉर्म आईडी 2 अंकों (form01) का अनुसरण कर रहा है, तो आप इंडेक्स को प्राप्त करने के लिए लाइन को अपडेट करते हैं:

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);
1
Tân 20 जिंदा 2020, 10:07

सभी 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() में बदल दिया है क्योंकि फ़िल्टर एक सरणी देता है

0
charlietfl 19 जिंदा 2020, 20:38