Create a dynamic dropdown form that loads its data from a JSON file using JQuery
<p>In a class, I was asked to make a dynamic drop-down menu in a form using HTML5 and JavaScript. I did that <a href="http://learn.ryanschostag.com/how-to-make-a-dynamic-dropdown-menu-in-javascript-and-html5/" rel="nofollow noreferrer">here</a>. </p>

<p>Now, I need to call data from a JSON file. I looked at other answers on SOF and am still not really understanding how to use JQuery to get info from the JSON file.</p>

<p>I need to have 2 fields: the first field is a Country. The JSON key is <code>country</code> and the value is <code>state</code>. A copy of the JSON file and contents can be found <a href="http://learn.ryanschostag.com/json-file-of-countries-and-states/" rel="nofollow noreferrer">here</a>. The second drop-down field adds only the values / arrays related to its associated Country.</p>

<p>Here is a copy of my HTML5 file:</p>

<pre><code>        &lt;!DOCTYPE html&gt;
        &lt;html lan="en"&gt;
            &lt;head&gt;
        &lt;!--        &lt;script type="text/javascript" src="sampleForm.js"&gt;&lt;/script&gt;--&gt;
        &lt;!--    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt; --&gt;
                &lt;script type="text/javascript" src="getData.js"&gt;&lt;/script&gt;
                &lt;script type="text/javascript" src="moreScript.js"&gt;&lt;/script&gt;
            &lt;meta charset="UTF-8";
                &lt;title&gt;Select Country and State&lt;/title&gt;
                &lt;link rel="stylesheet" href="formStyle.css" /&gt;
            &lt;/head&gt;
            &lt;body&gt;
          &lt;form id="locationSelector" enctype='application/json'&gt;
                &lt;br id="selectCountry"&gt;&lt;/br&gt;
                &lt;select id='country'&gt;&lt;/select&gt;
                &lt;br id="selectState"&gt;=&lt;/br&gt;
                &lt;select id='state'&gt;&lt;/select&gt;
            &lt;/form&gt;
          &lt;/body&gt;
        &lt;/html&gt;
</code></pre>

<p>Here is a copy of the JS file I wrote so far that tries to get the data from the JSON file and fails:</p>

<pre><code>  $(document).ready(function() {

      var data = "countryState.JSON";

      var $selectCountry = $("#country");

      $.each(data.d, function(i, el) {
          console.log(el);
          $selectCountry.append($("&lt;option /&gt;", { text: el }));
      });
  });
</code></pre>

<p>Here is the content from the other JS file that adds the field instruction:</p>

<pre><code>var selectYourCountry = document.getElementById('selectCountry');
selectYourCountry.innerHTML = "Select Your Country: ";
var selectYourState = document.getElementById('selectState');
selectYourState.innerHTML = "Select Your State";
</code></pre>

<p>This was supposed to at least add the values to the field, but nothing but empty boxes appear on the web page.</p>

<p>I then need to make a conditional statement like the one at <a href="http://learn.ryanschostag.com/how-to-make-a-dynamic-dropdown-menu-in-javascript-and-html5/" rel="nofollow noreferrer">here</a> but calling or referencing data from the JSON file. </p>

<p>I have only taken some HTML and JavaScript courses, not JQuery and JSON. So, your help will greatly increase my knowledge, which I will be very grateful for.</p>

<p>Thank you!!</p>

<p>I found this <a href="https://stackoverflow.com/questions/19725203/how-to-populate-dropdownlist-with-json-data-as-ajax-response-in-jquery">SOF answer</a> and changed my JS file to the following:</p>

<pre><code>    $(document).ready(function()
    {
    $('#locationSelector').click(function() {

        alert("entered in trial button code");

            $.ajax({
                type: "GET",
                url:"countryState.JSON",
                dataType: "json",
                success: function (data) {
                    $.each(data.country,function(i,obj)
                    {
                     alert(obj.value+":"+obj.text);
                     var div_data="&lt;option value="+obj.value+"&gt;"+obj.text+"&lt;/option&gt;";
                    alert(div_data);
                    $(div_data).appendTo('#locator');
                    });
                    }
              });
            });
    });
</code></pre>

<p>And, I edited my HTML document as follows:</p>

<pre><code>  &lt;form id="locationSelector" enctype='application/json'&gt;&lt;/form&gt;
</code></pre>

<p>I removed and added back the <code>&lt;select&gt;</code> tags and with the following at least I get a blank box:</p>

<pre><code> `&lt;form id="locationSelector" enctype='application/json'&gt;
    &lt;select id="locator"&gt;&lt;/select&gt;
&lt;/form&gt;`
</code></pre>

<p>I feel like I am getting closer, but am still lost. </p>