title: Dynamic Drop Down lists using ajax, sql and php
body: <p>I have a code which is working well. It populates the dropdowns dependent upon the previous list but there is a problem.
  In the html form in the <code>&lt;option value =""&gt;</code> field it displays "id" which is a numeric value instead of "name". Can someone please tell me how it can display "name" instead of the value. The actual problem is that it when it saves data in the sql database, it stores the corresponding "id" of the country or the state or city rather than its "name".</p>
  
  <p>This is the code that I am using. I have tried changing the last line in ajax.php <code>echo "&lt;option value='$entity_id'&gt;$enity_name&lt;/option&gt;";</code> to <code>echo "&lt;option value='$entity_name'&gt;$enity_name&lt;/option&gt;";</code> but then the dynamic dropdowns do not work as they are dependent upon "id". Many thanks for your help.</p>
  
  <p>ajax.php</p>
  
  <pre><code>&lt;?php
      /* File : ajax.php
       * Author : Manish Kumar Jangir
      */
      class AJAX {
  
          private $database = NULL;
          private $_query = NULL;
          private $_fields = array();
          public  $_index = NULL;
          const DB_HOST = "localhost";
          const DB_USER = "admin";
          const DB_PASSWORD = "admin";
          const DB_NAME = "disciples";
  
  
          public function __construct(){
              $this-&gt;db_connect();                    // Initiate Database connection
              $this-&gt;process_data();
          }
  
          /*
           *  Connect to database
          */
          private function db_connect(){
              $this-&gt;database = mysql_connect(self::DB_HOST,self::DB_USER,self::DB_PASSWORD);
              if($this-&gt;database){
                  $db =  mysql_select_db(self::DB_NAME,$this-&gt;database);
              } else {
                  echo mysql_error();die;
              }
          }
  
          private function process_data(){
              $this-&gt;_index = ($_REQUEST['index'])?$_REQUEST['index']:NULL;
              $id = ($_REQUEST['id'])?$_REQUEST['id']:NULL;
              switch($this-&gt;_index){
                  case 'country':
                      $this-&gt;_query = "SELECT * FROM countries";
                      $this-&gt;_fields = array('id','country_name');
                      break;
                  case 'state':
                      $this-&gt;_query = "SELECT * FROM states WHERE country_id=$id";
                      $this-&gt;_fields = array('id','state_name');
                      break;
                  case 'city':
                      $this-&gt;_query = "SELECT * FROM cities WHERE state_id=$id";
                      $this-&gt;_fields = array('id','city_name');
                      break;
                  default:
                      break;
              }
              $this-&gt;show_result();
          }
  
          public function show_result(){
              echo '&lt;option value=""&gt;Select '.$this-&gt;_index.'&lt;/option&gt;';
              $query = mysql_query($this-&gt;_query);
              while($result = mysql_fetch_array($query)){
                  $entity_id = $result[$this-&gt;_fields[0]];
                  $enity_name = $result[$this-&gt;_fields[1]];
                  echo "&lt;option value='$entity_id'&gt;$enity_name&lt;/option&gt;";
              }
          }
      }
  
      $obj = new AJAX;
  
  ?&gt;
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head profile="http://gmpg.org/xfn/11"&gt;
  &lt;head&gt;
  &lt;title&gt;Country State City Dependent Dropdown using Ajax&lt;/title&gt;
  &lt;script type="text/javascript" src="jquery-1.5.2.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      load_options('','country');
  });
  
  function load_options(id,index){
      $("#loading").show();
      if(index=="state"){
          $("#city").html('&lt;option value=""&gt;Select city&lt;/option&gt;');
      }
      $.ajax({
          url: "ajax.php?index="+index+"&amp;id="+id,
          complete: function(){$("#loading").hide();},
          success: function(data) {
              $("#"+index).html(data);
          }
      })
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="width:800px; margin:auto;padding-top:100px;"&gt;
  &lt;h1&gt;Country,State,City dynamic dependent dropdown using Ajax and Jquery&lt;/h1&gt;
  &lt;form&gt;
          &lt;label&gt;Select Country&lt;/label&gt;
          &lt;select id="country" name="country" onchange="load_options(this.value,'state');"&gt;
              &lt;option value=""&gt;Select country&lt;/option&gt;
          &lt;/select&gt;
          &amp;nbsp;&amp;nbsp;&amp;nbsp;
          &lt;label&gt;Select State&lt;/label&gt;
          &lt;select id="state" name="state" onchange="load_options(this.value,'city');"&gt;
              &lt;option value=""&gt;Select state&lt;/option&gt;
          &lt;/select&gt;
          &amp;nbsp;&amp;nbsp;&amp;nbsp;
          &lt;label&gt;Select city&lt;/label&gt;
          &lt;select id="city" name="city"&gt;
              &lt;option value=""&gt;Select City&lt;/option&gt;
          &lt;/select&gt;
          &lt;img src="loader.gif" id="loading" align="absmiddle" style="display:none;"/&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>