किसी अन्य ड्रॉपडाउन के आधार पर ड्रॉपडाउन को पॉप्युलेट करने का सबसे अच्छा और आसान तरीका क्या है

पहला और सर्वोत्तम तरीका (यदि आपके पास पर्याप्त विकल्प विशिष्ट डेटा है या हो सकता है)
AJAX का उपयोग करें। मुझे लगता है कि इसे लागू करने के अन्य तरीकों की तुलना में यह सबसे आसान तरीका है। AJAX को लागू करने के लिए Jquery का उपयोग करें। यह AJAX को केक का एक टुकड़ा बनाता है! यहाँ मैं आपके लिए अपना केक का टुकड़ा साझा कर रहा हूँ -

आपके लिए आवश्यक संपूर्ण कोड निम्नलिखित है -

• अपने पहले चयन पर एक जावास्क्रिप्ट फ़ंक्शन populateSecondDropdown() को कॉल करें -

      echo "<select  name='course[]' value='' multiple='multiple' size=10 onchange='populateSecondDropdown(this, 'http://yourprojectUrl','Any Subject');'>";
              // printing the list box select command
              echo "<option value=''>All</option>";
              while($ntc=mysqli_fetch_array($queryc))
              {//Array or records stored in $nt
                  echo "<option value=\"$ntc[course]\">\"$ntc[course]\"</option>";
                  /* Option values are added by looping through the array */
              }
              echo "</select>";// Closing of list box 
  

• populateSecondDropdown () फ़ंक्शन के अंदर अजाक्स कॉल को परिभाषित करें -

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  
  <script  type="text/javascript">  
      function populateSecondDropdown(object,baseUrl)
      {
          $.ajax({
          type: "POST", 
          url: baseUrl+"/ajax/fetchOptions.php", 
          data: { id_option: $(object).val(), operation: 'get_subjects' },
          dataType: "json",
          success: function(data) 
          {
              //Clear options corresponding to earlier option of first dropdown
             $('select#secondDropdown').empty(); 
             $('select#secondDropdown').append('<option value="0">Select Option</option>');
                     //Populate options of the second dropdown
             $.each( data.subjects, function() 
             {    
                 $('select#secondDropdown').append('<option value="'+$(this).attr('option_id')+'">'+$(this).attr('option_name')+'</option>');
             });
             $('select#secondDropdown').focus();
          },
              beforeSend: function() 
              {
                  $('select#secondDropdown').empty();
                  $('select#secondDropdown').append('<option value="0">Loading...</option>');
              },
              error: function() 
             {
                $('select#secondDropdown').attr('disabled', true);
                $('select#secondDropdown').empty();
                 $('select#secondDropdown').append('<option value="0">No Options</option>');
            }
          });
       }
  </script>
  

  • और अंत में AJAX प्रोसेसर फ़ाइल में दूसरे ड्रॉपडाउन के विकल्प लाने के लिए क्वेरी fetchOptions.php। इसके अंतर्गत विकल्पों को लाने के लिए आप यहां $_POST['id_option'] का उपयोग कर सकते हैं। यहां डेटाबेस क्वेरी को option_id लाना चाहिए और option_name प्रत्येक विकल्प के लिए फ़ील्ड (जैसा कि $.each . के अंदर jQuery कोड द्वारा अपेक्षित है) ) और इस तरह एक जेसन एन्कोडेड सरणी लौटाएं:-

    return json_encode(array("subjects" => $resultOfQuery));
    

दूसरी विधि (केवल जावास्क्रिप्ट का उपयोग करके)

• पहले ड्रॉपडाउन के क्षेत्र द्वारा समूहीकृत दूसरे ड्रॉपडाउन के लिए सभी डेटा प्राप्त करें। उदा. आइए पहले ड्रॉपडाउन में प्रदर्शित पाठ्यक्रम और दूसरे में प्रदर्शित पाठ्यक्रमों के तहत विषय लें

  • दूसरे ड्रॉपडाउन के सभी विकल्प बनाएं। इस तरह के विकल्प बनाते हुए कोर्स के बराबर क्लास असाइन करें:-

    $querycourse = "SELECT course, subject FROM subjects WHERE subject IS NOT NULL GROUP BY course ";
    $procc = mysqli_prepare($link, $querycourse);
    $queryc =  mysqli_query($link, $querycourse) or die(mysqli_error($link));
    
    echo "<select  name='subjects[]' value='' multiple='multiple' size=100>";
    echo "<option value=''>All</option>";
                while($ntc=mysqli_fetch_array($queryc))
                {//Array or records stored in $nt
                    echo "<option value=\"$ntc[subject]\" class=\"$ntc[course]\">\"$ntc[subject]\"</option>";
                }
                echo "</select>";
    

  • फिर परिभाषित करें onchange="displaySubjectsUnderThisCourse(this);" पहले ड्रॉपडाउन के लिए और इस जावास्क्रिप्ट को लिखें :-

     function displaySubjectsUnderThisCourse(object)
     {
         var selectedCourse = $(object).val();
        //Display the options with class = the selected option from first dropdown
        $("."+selectedCourse).removeClass("hidden"); //define a class hidden with display:none;
    
       $('option:not(.selectedCourse)').hide();  // hide all options whose class is other than selectedCourse - Not sure whether this will work or not, though
    
      //Deselect any previous selections
      //If single option selection is allowed
      $('select#secondDropdown option').attr('selected', false); 
      // or following if multiple selection is allowed (needed for IE)
      $('select#secondDropdown option').attr('selectedIndex', -1); 
    
    
    }
    

    यहां मूल विचार विकल्प समूहों को छिपाना/दिखाना है लेकिन मेरे कोड में त्रुटियां हो सकती हैं।

अंत में, कृपया ध्यान दें, दूसरी विधि (सभी विकल्प मान प्राप्त करना) केवल तभी बेहतर होगी जब आपके पास सीमित मात्रा में डेटा हो और यह सुनिश्चित हो कि भविष्य में हमेशा कम डेटा होगा। लेकिन, चूंकि कोई भी भविष्य के बारे में इतना निश्चित नहीं हो सकता है, इसलिए सलाह दी जाती है कि हमेशा AJAX विधि का उपयोग करें।