title: how to retrive data from json file to dropdownlist in html using ajax and java script
body: <p>I want to retrieve data from json file to two dropdownlist in html using ajax and java script, I want to retrive data in the first one dropdownlist then when I choose any option the data that relate to this option retrive to the second one dropdownlist</p>
  
  <p>This is my json file:</p>
  
  <pre><code>{
      "beatles" : [{
              "name" : "Paul McCartney",
              "value" : "http://www.paulmccartney.com"
          }, {
              "name" : "John Lennon",
              "value" : "http://www.johnlennon.it"
  
          }, {
              "name" : "George Harrison",
              "value" : "http://www.georgeharrison.com"
          }, {
              "name" : "Ringo Starr",
              "value" : "http://www.ringostarr.com"
          }
      ],
      "stones" : [{
              "name" : "Mick Jagger",
              "value" : "http://www.mickjagger.com"
          }, {
              "name" : "Keith Richards",
              "value" : "http://www.keithrichards.com"
          }, {
              "name" : "Charlie Watts",
              "value" : "http://www.rosebudus.com/watts"
          }, {
              "name" : "Bill Wyman",
              "value" : "http://www.billwyman.com"
          }
      ],
      "genesis" : [{
              "name" : "Phil Collins",
              "value" : "http://www.philcollins.co.uk"
          }, {
              "name" : "Peter Gabriel",
              "value" : "http://www.petergabriel.com"
  
          }, {
              "name" : "Mike Rutherford",
              "value" : "http://www.mike-and-the-mechanics.co.uk"
          }
      ],
      "eagles" : [{
              "name" : "Don Henley",
              "value" : "http://www.donhenley.com"
          }, {
              "name" : "Joe Walsh",
              "value" : "http://www.joewalsh.com"
  
          }, {
              "name" : "Glenn Frey",
              "value" : "http://www.imdb.com/name/nm0004940"
          }
      ]
  }
  </code></pre>
  
  <p>And this is my html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  
  
  &lt;meta charset='UTF-8'&gt;
  
      &lt;title&gt;Dynamic Dropdown&lt;/title&gt;
  
      &lt;link rel='stylesheet' href='css/style.css'&gt;
  
  
      &lt;script&gt;
          var xmlhttp = new XMLHttpRequest();
  var url = "bands.json";
  
  xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
          var myArr = JSON.parse(xmlhttp.responseText);
          myFunction(myArr);
      }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="page-wrap"&gt;
  
          &lt;h1&gt;Pulls from JSON&lt;/h1&gt;
          &lt;pre&gt;Band:&lt;/pre&gt;  
          &lt;select id="brand"&gt;
              &lt;option selected value="base"&gt;Please Select&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;br /&gt;
          &lt;pre&gt;Artist:&lt;/pre&gt;
          &lt;select id="artist"&gt;
              &lt;option&gt;Please choose from above&lt;/option&gt;
          &lt;/select&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I want the result to be like this:<br>
  <a href="https://i.stack.imgur.com/nu4sH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nu4sH.png" alt="enter image description here"></a></p>