jQuery/AJAX और PHP/MySQL का उपयोग करके पहले ड्रॉपडाउन के चयन के आधार पर दूसरा ड्रॉपडाउन कैसे पॉप्युलेट करें?

Question

मैं jQuery/AJAX और PHP/MySQL का उपयोग करके ड्रॉपडाउन बॉक्स का एक गतिशील सेट बनाने की कोशिश कर रहा हूं। जब डेटाबेस डेटाबेस से मूल्यों के आधार पर लोड होता है तो पहला ड्रॉपडाउन बॉक्स पॉप्युलेट हो जाएगा। दूसरे ड्रॉपडाउन बॉक्स को पहले ड्रॉपडाउन बॉक्स से चयन के आधार पर मूल्यों का एक सेट प्रदर्शित करना चाहिए। मुझे पता है कि यहां पहले से पूछे गए समान प्रश्न हैं, लेकिन मुझे कोई समाधान नहीं मिला है जो मेरे परिदृश्य से मेल खाता है।

दूसरी ड्रॉप डाउन के लिए मानों की JSON एन्कोडेड सूची जेनरेट करने के लिए मेरी क्वेरी काम कर रही है, लेकिन मुझे वास्तविक ड्रॉपडाउन फॉर्म तत्व में इसे पॉपुल करने में समस्याएं आ रही हैं। कोई विचार है कि मैं कहां गलत हो रहा हूं।

जावास्क्रिप्ट:

<script> 
$().ready(function() { 

    $("#item_1").change(function() { 

     var group_id = $(this).val(); 

     $.ajax({ 
      type: "POST", 
      url: "../../db/groups.php?item_1_id=" + group_id, 
      dataType: "json", 
      success: function(data){ 
       //Clear options corresponding to earlier option of first dropdown 
       $('select#item_2').empty(); 
       $('select#item_2').append('<option value="0">Select Option</option>'); 
       //Populate options of the second dropdown 
       $.each(data.subjects, function(){  
        $('select#item_2').append('<option value="'+$(this).attr('group_id')+'">'+$(this).attr('name')+'</option>'); 
       }); 
       $('select#item_2').focus(); 
      }, 
      beforeSend: function(){ 
       $('select#item_2').empty(); 
       $('select#item_2').append('<option value="0">Loading...</option>'); 
      }, 
      error: function(){ 
       $('select#item_2').attr('disabled', true); 
       $('select#item_2').empty(); 
       $('select#item_2').append('<option value="0">No Options</option>'); 
      } 
     }) 

    }); 
}); 

</script> 

HTML:

<label id="item_1_label" for="item_1" class="label">#1:</label> 
<select id="item_1" name="item_1" /> 
    <option value="">Select</option> 
    <?php 
     $sth = $dbh->query ("SELECT id, name, level 
          FROM groups 
          WHERE level = '1' 
          GROUP by name 
          ORDER BY name");         
     while ($row = $sth->fetch()) { 
      echo '<option value="'.$row['id'].'">'.$row['name'].'</option>'."\n";  
     } 
    ?> 
</select> 

<label id="item_2_label" for="item_2" class="label">#2:</label> 
<select id="item_2" name="item_2" />       
</select> 

पीएचपी:

<?php 

require_once('../includes/connect.php');   

$item_1_id = $_GET['item_1_id']; 

$dbh = get_org_dbh($org_id); 

$return_arr = array(); 

$sth = $dbh->query ("SELECT id, name, level 
        FROM groups 
        WHERE level = '2' 
        AND parent = $item_1_id 
        GROUP by name 
        ORDER BY name"); 

while ($row = $sth->fetch()) { 

    $row_array = array("name" => $row['name'], 
         "id" => $row['id']); 

    array_push($return_arr,$row_array);  
} 

echo json_encode($return_arr); 

?> 

नमूना JSON आउटपुट:

[{"name":"A","id":"0"},{"name":"B","id":"1"},{"name":"C","id":"2"}] 

Answer 1

सबसे पहले, आपका दस्तावेज़-तैयार थोड़ा सा दिखता है, यह $(document).ready(function(){}); होना चाहिए या यह केवल $(function(){}); हो सकता है।

दूसरा, आप जेएसओएन परिणाम पर लूपिंग थोड़ा अजीब दिखते हैं। इसके बजाए इस तरह कुछ कोशिश करें:

$.each(data.subjects, function(i, val){  
    $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>'); 
});