Question

我一直在努力做到这一点，而我所做的一切都在努力。我制作了动态下拉菜单的硬编码版本，其中第二个字段（State）根据第一个字段（Country）的选择所提供的条件提供信息。

这是硬编码的html和JavaScript文件：

form.html

<!DOCTYPE html>
<html lan="en">
    <head>
<!--        <script type="text/javascript" src="sampleForm.js"></script>-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="sampleForm.js"</script>
    <meta charset="UTF-8";
        <title>Select Country and State</title>
        <link rel="stylesheet" href="formStyle.css" />
    </head>
    <body>
  <form id="sampleForm" enctype='application/json'>
        <option id='country'>Select Your Country</option>
    </form>
  </body>
</html>

populate.js：

function populate(s1,s2){
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  s2.innerHTML="";
  if(s1.value=="Canada"){
    var getStates = ["|","alberta|Alberta", "britishColumbia|British Columbia", "manitoba|Manitoba", "newBrunswick|New Brunswick", "newfoundlandAndLabrador|Newfoundland and Labrador", "northwestTerritories|Northwest Territories", "novaScotia|Nova Scotia", "nunavut|Nunavut", "ontario|Ontario", "princeEdwardIsland|Prince Edward Island", "quebec|Quebec", "saskatchewan|Saskatchewan", "yukonTerritory|Yukon Territory"];
  } else if(s1.value=="Pakistan"){
    var getStates = ["|","balochistan|Balochistan", "northWestFrontierProvince|North-West Frontier Province", "punjab|Punjab", "sindh|Sindh", "islamabadCapitalTerritory|Islamabad Capital Territory", "federallyAdministeredTribalAreas|Federally Administered Tribal Areas"];
  } else if(s1.value=="USA"){
    var getStates = ["|","alabama|Alabama", "alaska|Alaska", "arizona|Arizona", "arkansas|Arkansas", "california|California", "colorado|Colorado", "connecticut|Connecticut", "delaware|Delaware", "districtOfColumbia|District of Columbia", "florida|Florida", "georgia|Georgia", "hawaii|Hawaii", "idaho|Idaho", "illinois|Illinois"];
  }
  for(var myState in getStates){
    var pair = getStates[myState].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
  }
}

我有一个包含Country键和State值的JSON文件。我想将键和值调用到下拉菜单选项中。根据我在

找到的答案

  $(document).ready(function() {

      var data = countryState.json;

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

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

这是新的html文件：

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

这是html文件引用的JavaScript文件：

  $(document).ready(function() {

      var data = "countryState.JSON";

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

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

这是JSON文件：

http://learn.ryanschostag.com/json-file-of-countries-and-states/

我的新JavaScript文件基于Andrew Whitaker在I need help populating my dropdown with my JSON response的答案。

我的JSON文件是在gitHub上找到的。

我试过让我的表单的src成为JSON文件。我现在尝试了很多东西大约一个小时，并且无法将数据填充到下拉菜单中，更不用说根据条件使它们变得动态了。

我不知道如何编写与调用JSON数据相关的条件if / else语句和functions，并将其传递给下拉选项。

请帮忙！

谢谢！

JavaScript / JQuery将JSON数据加载到HTML5动态下拉列表中

0 个答案: