title: How do I get the selected value of the second dropdown from the first dropdown via MY-SQL?
body: <p>I want to get the first dropdown menu to get the selected value for the selected dropbox, but I would like to to have all the categories still being in the second dropbox, so I can change the category of the article.</p>
  
  <p>For example, the user chooses a article in the first dropbox, then the category that is associated with that article gets selected, but the user can change the category in the dropbox. Can this be done? </p>
  
  <p>I have tried using Javascript from a previous question , but it's only getting the selected category associated with that article and not all the other categories. What should I do? Does anyone know how this can be done? </p>
  
  <pre><code>&lt;?php   $link = mysqli_connect("160.153.129.204", "username", "password", "lvo92");
  
    $db = new mysqli("160.153.129.204", "laurensvo92", "90F0411553l", "lvo92");//set your database handler
    $query = "SELECT catid, titel FROM artikelen";
    $result = $db-&gt;query($query);
  
    while($row = $result-&gt;fetch_assoc()){
      $categories[] = array("catid" =&gt; $row['catid'], "val" =&gt; $row['titel']);
    }
  
    $query = "SELECT catid, cat FROM Categorie";
    $result = $db-&gt;query($query);
  
    while($row = $result-&gt;fetch_assoc()){
      $subcats[$row['catid']][] = array("catid" =&gt; $row['catid'], "val" =&gt; $row['cat']);
    }
  
    $jsonCats = json_encode($categories);
    $jsonSubCats = json_encode($subcats);
  
  
  ?&gt;          
  
       &lt;script type='text/javascript'&gt;
        &lt;?php
          echo "var categories = $jsonCats; \n";
          echo "var subcats = $jsonSubCats; \n";
        ?&gt;
        function loadCategories(){
          var select = document.getElementById("categoriesSelect");
          select.onchange = updateSubCats;
          for(var i = 0; i &lt; categories.length; i++){
            select.options[i] = new Option(categories[i].val,categories[i].catid);          
          }
        }
     function updateSubCats(){
      var catSelect = this;
      var catid = this.value;
      var testSelectionArray = new Array();
  
  for(var j = 0; j &lt; this.options.length; j++) {
        if (this.options[j].selected) {
             testSelectionArray.push(this.options[j].value); 
         }
  }
  
      var subcatSelect = document.getElementById("subcatsSelect");
      subcatSelect.options.length = 0; //delete all options if any present
      var k=0;
      for(var i = 0; i &lt; testSelectionArray.length; i++){
        catid = testSelectionArray[i];
          for(var j = 0; j &lt; subcats[catid].length; j++){
              subcatSelect.options[k++] = new Option(subcats[catid][j].val,subcats[catid][j].catid);
          }        
      }
    }
      &lt;/script&gt;
  
       &lt;body onload='loadCategories()'&gt;
      &lt;select id='categoriesSelect'&gt;
      &lt;/select&gt;
  
      &lt;select id='subcatsSelect'&gt;
          &lt;/select&gt;
  </code></pre>