PHP MYSQL डायनेमिक सेलेक्ट बॉक्स

जैसा कि आपने ऊपर बताया है, पहले php के साथ नंबर 1 सेलेक्ट मेनू बनाएं। फिर इसमें एक 'चेंज' इवेंट लिस्टनर जोड़ें जैसे:

$('#select1').change(createSelect2);

function createSelect2(){
    var option = $(this).find(':selected').val(),
    dataString = "option="+option;
    if(option != '')
    {
        $.ajax({
            type     : 'GET',
            url      : 'http://www.mitilini-trans.gr/demo/test.php',
            data     : dataString,
            dataType : 'JSON',
            cache: false,
            success  : function(data) {            
                var output = '<option value="">Select Sth</option>';

                $.each(data.data, function(i,s){
                    var newOption = s;

                    output += '<option value="' + newOption + '">' + newOption + '</option>';
                });

                $('#select2').empty().append(output);
            },
            error: function(){
                console.log("Ajax failed");
            }
        }); 
    }
    else
    {
        console.log("You have to select at least sth");
    }
}

अब नंबर 2 सेलेक्ट मेन्यू में सेलेक्ट 1 सेलेक्ट किए गए विकल्प के अनुसार नए विकल्प हैं।

और php फ़ाइल:

<?php
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');

if(isset($_GET['option']))
{
    $option = $_GET['option'];

    if($option == 1)
    {
        $data = array('Arsenal', 'Chelsea', 'Liverpool');
    }
    if($option == 2)
    {
        $data = array('Bayern', 'Dortmund', 'Gladbach');
    }       
    if($option == 3)
    {
        $data = array('Aek', 'Panathinaikos', 'Olympiakos');
    }

    $reply = array('data' => $data, 'error' => false);
}
else
{
    $reply = array('error' => true);
}

$json = json_encode($reply);    
echo $json; 
?>

बेशक मैं कुछ डेमो डेटा का उपयोग करता हूं लेकिन आप एक एसक्यूएल क्वेरी को $ डेटा सरणी को पॉप्युलेट कर सकते हैं और उन्हें सही हेडर के साथ जेसन के रूप में भेज सकते हैं। अंत में दूसरे चयन मेनू के लिए कुछ और js का उपयोग करें:

$('#select2').change(selectSelect2);

function selectSelect2(){
    var option = $(this).find(':selected').val();
    if(option != '')
    {
        alert("You selected: "+option);
    }
    else
    {
        alert("You have to select at least sth");
    }
}

यहां देखें http://jsfiddle.net/g3Yqq/2/ एक कार्यशील उदाहरण