Geeting Combobox's value and fill (fetch from DB and dsiplay)into another on click ??

[abhi10kumar]

I have two combo boxes, Country and Cities.
I user clicks Country Combo box its corresponding value will fetch from DB and fill into its child combo box (also came from DB)

[rpv_sen]

Hi

I have collected the below script from web and modified as we wish. I think it will be more helpful for you

eg.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#wait_1').hide();
    $('#country').change(function(){
      $('#wait_1').show();
      $('#result_1').hide();
      $.get("func.php", {
        func: "country",
        drop_var: $('#country').val()
      }, function(response){
        $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
        return false;
    });
});

function finishAjax(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
</script>
<label for="Itemname">Country:</label>
<select name="country" id="country">
<option value="" selected="selected" disabled="disabled">Select a country</option>
<?php getTierOne(); ?>
</select><br><br>

<label for="cities">Cities:</label>
                        <span id="wait_1" style="display: none;">
                            <img alt="Please Wait" src="images/ajax-loader.gif"/></span>
                            <span id="result_1" style="display: none;"></span>

func.php

<?php
//**************************************
//     Page load dropdown results     //
//**************************************
function getTierOne()
{
    $result = mysql_query("SELECT DISTINCT country FROM $tablename") 
    or die(mysql_error());

      while($tier = mysql_fetch_array( $result )) 

        {
           echo '<option value="'.$tier['country'].'">'.$tier['country'].'</option>';
        }

}

//**************************************
//     First selection results     //
//**************************************
if($_GET['func'] == "country" && isset($_GET['func'])) { 
   material($_GET['drop_var']); 
}

function material($drop_var)
{  
    include_once('config.php');
    $result = mysql_query("SELECT * FROM $tablename WHERE country='$drop_var'") 
    or die(mysql_error());

    echo '<select name="cities" id="cities">';

           while($drop_2 = mysql_fetch_array( $result )) 
            {
              echo '<option value="'.$drop_2['cities'].'">'.$drop_2['cities'].'</option>';
            }

    echo '</select> ';
//    echo '<input type="submit" name="submit" value="Submit" />';
}
?>

[ CODE ] would help

I suggest an ajax solution. You don't really want a page reload on choosing a country.

...reference jquery CDN from google code...
<script type="text/javascript">
$("#country").click(function () { 
  var cVal =  $("#country").val();
  ...(do ajax)...
  ...return options in option tags as retVal...
  $("#cities").html(retVal);
});
</script>

<select id="country" name="country">
{have list from DB on page load from php, e.g.}
  <option value="6" selected="selected">Wales</option>
</select>

<select id="cities" name="cities">
{have list from DB on page load from php based on the default country, e.g.}
  <option value="1">Abertawe</option>
  <option value="2" selected="selected">Caerdydd</option>
  <option value="3">Ty Ddewi</option>
</select>