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

फॉर्म विकास के दायरे में, अधिक उपयोगकर्ता-अनुकूल प्रदान करने के लिए कैस्केडिंग ड्रॉपडाउन का अक्सर उपयोग किया जाता है और गतिशील अनुभव. अनुकूलता बढ़ाने और क्रॉस-ब्राउज़र समस्याओं का समाधान करने के लिए, jQuery इन ड्रॉपडाउन को अतुल्यकालिक रूप से पॉप्युलेट करने के लिए एक मजबूत समाधान प्रदान करता है।

समस्या में दिखाए गए कैस्केडिंग ड्रॉपडाउन बनाने के लिए मूल जावास्क्रिप्ट फ़ंक्शन में IE के साथ संगतता का अभाव था। इसे हल करने के लिए, हम 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)
    });
});

यह कैसे काम करता है:

1. हम एक स्थान ऑब्जेक्ट को परिभाषित करते हैं जो देशों को उनके संबंधित शहरों में मानचित्रित करता है।
2. हम इसकी पहचान करते हैं देश ड्रॉपडाउन (#देश) और स्थान ड्रॉपडाउन (#स्थान)।
3. जब देश ड्रॉपडाउन में किसी देश का चयन किया जाता है, तो इवेंट हैंडलर स्थान ऑब्जेक्ट से संबंधित शहरों को पुनः प्राप्त करता है।
4. शहरों को HTML विकल्पों में परिवर्तित किया जाता है और स्थान ड्रॉपडाउन को पॉप्युलेट करने के लिए उपयोग किया जाता है।

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