Second select box populate from first selectbox in jquery

Question

i want to populate second select box name 'ctype' from the value of first select box. but the problem,still not display the value that i attach...i dont know how..now already 2 weeks i try to solved..but still nothing to display in second select box..

cash.php

on the first select box

<?php $qryselect = mysql_query("select * from cc_merchant"); ?>      
<select id="merchant" name="merchant"  style="font:25px Arial, Helvetica, sans-serif;   font-weight:bold; color:#000000;">
     <option value=''>--Choose One--</option>
            <?php while($getrow=mysql_fetch_array($qryselect)) {?>
     <option value="<?php echo $getrow['merchant_id']; ?>" ><?php echo $getrow['bank_merchant'];  ?></option>
            <?php }  ?>
</select>

second selectbox

<p id="ctype">
    <select id="ctype_id" name="ctype_id" style="font:25px Arial, Helvetica, sans-serif; font-weight:bold; color:#000000;">    
        <option value="">--Choose One--</option>
     </select>
</p>

jquery

<script type="text/javascript">
    $("#merchant").selectbox({
    onChange:function(val,inst){
            $.ajax({
                    type:"GET",
                    data:{merchant:val},
                    url:"getctype.php",
                    success:function(data){
                          $("#ctype").html(data);
                          $("#ctype_id").selectbox();
                    }
            });
         },
    });
</script>

script getctype.php

<?php
   session_start();
   require_once("dbcon.php");
   $target = $_GET['merchant'];

   $sql = mysql_query("select card from card_support where merchant_id = '$target'");
   $getmerchant = mysql_fetch_assoc($sql);
   $card = $getmerchant['card'];

   echo $card."\n";
?>

this is the example that i follow...the value from the first select box populate to second select box... http://www.bulgaria-web-developers.com/projects/javascript/selectbox/index.php

Answer 1

First, you getctype.php is asking the database and return only one card. May be you should iterate on the result in order to return multiple values. Moreover, it is recommended to return JSON data (which will be easyly managed by the Javascript). You can do this work with a piece of code like

<?php

// start the session and load your libs
session_start();
require_once("dbcon.php");

// Ask DB for result and store them in an array
$sql = mysql_query("select card from card_support where merchant_id = '$target'");
$result = array();
while($getmerchant = mysql_fetch_assoc($sql))
    $result[] = $getmerchant;

// Send JSON header (no cache)
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

// Finally return the array in JSON format
echo json_encode($result);

The data returned by the PHP script will be a JSON response like:

["card1","card2","card3",....]

Secondly, when we look at you AJAX call, the success function is replacing the HTMLElement with the id ctype

$("#ctype").html(data);

The HTMLElement with the id ctype is a <p> , so the content of the <p> is completely replaces with your raw content (the card value), wich is not a . Then, your second line of code:

$("#ctype_id").selectbox();

will not have any effect because the does not exist anymore (replaced by the content return from the AJAX call).

To make it work, you can use this secon piece of code in JS:

// Assume the second select is already a **selectbox**    

// Make the first select a selectbox
$("#merchant").selectbox({

    onChange:function(val,inst){

        // Run the ajax call to refresh the content of the second selectbox
        $.ajax({
            type: "GET",
            data: { merchant: val },
            url:"getctype.php",
            dataType: 'json',
            success: function(data) {

                // Remove previous content of your second selectbox
                $("#ctype_id").empty();

                // Append default option
                $("#ctype_id").append($('<option value="">-- Chose one --</option>'));

                // Loop on your data (which is an array)
                for(var i = 0 ; i < data.length ; i++)
                {
                    $("#ctype_id").append($(document.createElement("option"))
                                          .val(data[i])
                                          .html(data[i]));
                }
            }
        });
    }
});

Answer 2

if you use jquery, i should do the following:

 $("#merchant").on('change', function() {

 $('#ctype_id').empty();
 $.get('getctype.php', function(data) {
 $(data).appendTo('#ctype_id');

 });
 });

You php code would be something like this:

echo '<option value="">--Choose One--</option>'
$sql = mysql_query("select card from card_support where merchant_id = '$target'");
$getmerchant = mysql_fetch_assoc($sql);
$card = $getmerchant['card'];

echo '<option value="'.$card.'">'.$card.'</option>';