title: dynamic drop down box?
body: <p>I got a database table called category as shown:</p>
  
  <p><img src="https://i.stack.imgur.com/NlhpV.png" alt="enter image description here"></p>
  
  <p>I am trying to do a dynamic drop down box and the index script is shown as:</p>
  
  <pre><code>&lt;?php
  
  try {
  
  $objDb = new PDO('mysql:host=localhost;dbname=test', 'root', '');
  $objDb-&gt;exec('SET CHARACTER SET utf8');
  
  $sql = "SELECT * 
          FROM `category`
          WHERE `master` = 0";
  $statement = $objDb-&gt;query($sql);
  $list = $statement-&gt;fetchAll(PDO::FETCH_ASSOC);
  
      } catch(PDOException $e) {
  echo 'There was a problem';
      }
  
      ?&gt;
      &lt;!DOCTYPE HTML&gt;
     &lt;html lang="en"&gt;
     &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;Dependable dropdown menu&lt;/title&gt;
  &lt;meta name="description" content="Dependable dropdown menu" /&gt;
  &lt;meta name="keywords" content="Dependable dropdown menu" /&gt;
  &lt;link href="/css/core.css" rel="stylesheet" type="text/css" /&gt;
  &lt;!--[if lt IE 9]&gt;
  &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;script src="/js/jquery-1.6.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="/js/core.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;div id="wrapper"&gt;
  
  &lt;form action="" method="post"&gt;
  
      &lt;select name="gender" id="gender" class="update"&gt;
          &lt;option value=""&gt;Select one&lt;/option&gt;
          &lt;?php if (!empty($list)) { ?&gt;
              &lt;?php foreach($list as $row) { ?&gt;
                  &lt;option value="&lt;?php echo $row['id']; ?&gt;"&gt;
                      &lt;?php echo $row['name']; ?&gt;
                  &lt;/option&gt;
              &lt;?php } ?&gt;
          &lt;?php } ?&gt;
      &lt;/select&gt;
  
      &lt;select name="category" id="category" class="update"
          disabled="disabled"&gt;
          &lt;option value=""&gt;----&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select name="colour" id="colour" class="update"
          disabled="disabled"&gt;
          &lt;option value=""&gt;----&lt;/option&gt;
      &lt;/select&gt;       
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The update.php is shown as:</p>
  
  <pre><code>&lt;?php
  if (!empty($_GET['id']) &amp;&amp; !empty($_GET['value'])) {
  
  $id = $_GET['id'];
  $value = $_GET['value'];
  
  try {
  
      $objDb = new PDO('mysql:host=localhost;dbname=test', 'root', '');
      $objDb-&gt;exec('SET CHARACTER SET utf8');
  
      $sql = "SELECT * 
              FROM `category`
              WHERE `master` = ?";
      $statement = $objDb-&gt;prepare($sql);
      $statement-&gt;execute(array($value));
      $list = $statement-&gt;fetchAll(PDO::FETCH_ASSOC);
  
      if (!empty($list)) {
  
          $out = array('&lt;option value=""&gt;Select one&lt;/option&gt;');
  
          foreach($list as $row) {
              $out[] = '&lt;option        
  value="'.$row['id'].'"&gt;'.$row['name'].'&lt;/option&gt;';
          }
  
          echo json_encode(array('error' =&gt; false, 'list' =&gt; implode('', 
  $out)));
  
      } else {
          echo json_encode(array('error' =&gt; true));
      }
  
  } catch(PDOException $e) {
      echo json_encode(array('error' =&gt; true));
  }
  
  } else {
  echo json_encode(array('error' =&gt; true));
  }
  </code></pre>
  
  <p>The 2nd drop down box is not showing the values dependent on the 1st drop down box as shown:</p>
  
  <p><img src="https://i.stack.imgur.com/Il9Ce.png" alt="enter image description here"> </p>
  
  <p>Can someone help me please.</p>