JQuery के साथ एक कैस्केडिंग ड्रॉपडाउन को पॉप्युलेट करना

समस्या:

आपका लक्ष्य एक गतिशील बनाना है JQuery का उपयोग करके दो ड्रॉपडाउन (देश और शहर) के साथ फॉर्म, यह सुनिश्चित करते हुए कि केवल चयनित देश से संबंधित शहर ही शहर में प्रदर्शित होते हैं ड्रॉपडाउन।

मूल जावास्क्रिप्ट कोड:

मूल जावास्क्रिप्ट फ़ंक्शन, काम करते समय, इंटरनेट एक्सप्लोरर में संगतता समस्याओं का सामना करता है। यह शहर के विकल्पों की हार्डकोडेड सरणियों पर भरोसा करते हुए, चयनित देश के आधार पर शहर ड्रॉपडाउन को गतिशील रूप से पॉप्युलेट करता है।

JQuery कार्यान्वयन:

अनुकूलता बढ़ाने और कार्यान्वयन को सरल बनाने के लिए, JQuery नियोजित किया जा सकता है. यहां JQuery का उपयोग करने का एक कुशल तरीका दिया गया है:

jQuery(function ($) {
  var locations = {
    'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
    'Spain': ['Barcelona'],
    'Hungary': ['Pecs'],
    'USA': ['Downers Grove'],
    'Mexico': ['Puebla'],
    'South Africa': ['Midrand'],
    'China': ['Beijing'],
    'Russia': ['St. Petersburg'],
  }

  var $locations = $('#location');
  $('#country').change(function () {
    var country = $(this).val(), lcns = locations[country] || [];

    var html = $.map(lcns, function (lcn) {
      return ''   lcn   ''
    }).join('');
    $locations.html(html)
  });
});

स्पष्टीकरण:

• हम एक ऑब्जेक्ट स्थानों को परिभाषित करते हैं जो देशों को संबंधित शहरों के सरणी में मैप करते हैं।
• परिवर्तन ईवेंट हैंडलर देश के लिए ड्रॉपडाउन शहर ड्रॉपडाउन की गतिशील जनसंख्या को ट्रिगर करता है।
• इवेंट हैंडलर को चयनित देश मिलता है और स्थानों से संबंधित शहर सरणी पुनर्प्राप्त करता है object.
• एक लूप शहरों के लिए HTML विकल्प तत्व बनाता है और $locations.html(html) का उपयोग करके उन्हें शहर ड्रॉपडाउन में जोड़ता है।

डेमो:

आप कार्यशील डेमो के लिए दिए गए फिडल लिंक का संदर्भ ले सकते हैं।

यह JQuery कार्यान्वयन संक्षिप्त, क्रॉस-ब्राउज़र है संगत, और कैस्केडिंग ड्रॉपडाउन की गतिशील जनसंख्या को सुविधाजनक बनाता है।