jquery-select2Jquery-select2 के साथ शुरुआत करना


टिप्पणियों

इस अनुभाग में यह बताया गया है कि jquery-select2 क्या है और एक डेवलपर इसका उपयोग क्यों करना चाहता है।

यह jquery-select2 के भीतर किसी भी बड़े विषयों का भी उल्लेख करना चाहिए, और संबंधित विषयों के लिए लिंक करना चाहिए। चूंकि jquery-select2 के लिए दस्तावेज़ीकरण नया है, इसलिए आपको उन संबंधित विषयों के प्रारंभिक संस्करण बनाने की आवश्यकता हो सकती है।

संस्करण

संस्करण नोट्स जारी करें लिंक रिलीज़ की तारीख
4.0.3 (वर्तमान) Select2 4.0.3 2016/05/27
4.0.2 Select2 4.0.2 2016/03/09
4.0.2 आरसी 1 Select2 4.0.2-rc1 2016/02/14
4.0.1 Select2 4.0.1 2015/11/27
4.0.1 आरसी 1 Select2 4.0.1-rc1 2015/11/10
3.5.4 Select2 3.5.4 2015/08/30
3.5.3 Select2 3.5.3 2015/08/20
** पुराने संस्करण यहां देखे जा सकते हैं: Select2 / विज्ञप्ति 2015/08/20

Jquery - Select2 स्थापना और सेटअप

आप दो तरीकों में से एक में Select2 को शामिल / स्थापित कर सकते हैं

  1. सीधे अपनी परियोजना के मुख्य भाग के तहत अपनी परियोजना में सीडीएन का उपयोग करना।

लिंक href = " https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css " rel = "स्टाइलशीट" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"/>
 
  1. अपने स्थानीय मशीन को कोड डाउनलोड करें और इसे अपनी परियोजना में शामिल करें। इसे ऐसा दिखना चाहिए यहाँ छवि विवरण दर्ज करें

फिर इन पंक्तियों को अपने html पेज के हेड सेक्शन में शामिल करें

  <link href="select2.min.css" rel="stylesheet" />
  <script src="select2.min.js"></script>
 

नोट: आपको सही ढंग से काम करने के लिए चयन 2 के लिए Jquery को अपनी परियोजना में शामिल करना होगा।

PITFALL: यदि वर्तमान संस्करण jquery और Select2 परस्पर विरोधी हैं या Select2 सुविधाएँ काम नहीं कर रही हैं। फिर डॉक्यूमेंट बॉडी $ (डॉक्यूमेंट) के अलग-अलग ब्लॉक में सेलेक्ट 2 वैरिएबल और इंप्लीमेंटेशन को स्थानांतरित करें। पहले से ही (फंक्शन () {// आपका सेलेक्ट 2 कोड .....});

इसका उपयोग कैसे करें: आप एक <select> को निम्न प्रकार से परिभाषित कर सकते हैं:

<select id="select2_example">
    <option>Test</option>
</select>
 

Approach1:

      var _mSelect2 = $("#select_example").select2();
 

Approach2:

  <script type="text/javascript">
      $('select').select2();
  </script>
 

कृपया ध्यान दें कि इस दृष्टिकोण का उपयोग करके पेज के सभी परिभाषित 'चयन' नियंत्रण में Select2 की विशेषताएं निहित होंगी। यदि आप केवल कुछ नियंत्रणों के लिए Select2 का उपयोग करना चाहते हैं, तो इस चरण को छोड़ दें और सीधे select2 सुविधा का उपयोग करने के लिए अपना कोड लिखें और अन्य चयन नियंत्रण के लिए अलग से jquery / जावास्क्रिप्ट सुविधा का उपयोग करें। हालांकि, आप Jquery या इसके विपरीत के लिए Select2 के माध्यम से हेरफेर के मूल्य का उपयोग कर सकते हैं।

'द बेसिक्स' के आगे के उदाहरण यहां Select2 GIT डॉक्यूमेंटेशन में देखे जा सकते हैं

Select2 GIT प्रोजेक्ट यहां है । कृपया इस उत्पाद की विस्तार सुविधा के लिए Select2 Github साइट पर जाएं।

Select2 ड्रॉपडाउन के चयनित तत्वों को साफ़ करने के लिए।

उन मानों के चयन को खाली करने के लिए जो कि Select2 ड्रॉप डाउन का उपयोग करके चुने गए हैं, हम खाली () फ़ंक्शन का उपयोग कर सकते हैं।

<select id="select2_example">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
 

Jquery का उपयोग करके ड्रॉपडाउन को रीसेट किया जा सकता है।

$("#select2_example").empty();
 

इसे नीचे भी रीसेट किया जा सकता है।

$("#select2_example").select2("val", "");