将json数据绑定到html页面的两个依赖下拉列表中，并显示相应的数据

Question

我在 json 文件中有以下数据。我希望这些数据显示在下拉列表中，如下所示：在第一个下拉，我可以select国。在第二个下拉列表中，我可以 select 来自 selected 国家的州。然后，该地点的人口显示在 html 页面下方的文本中。

[
  {
    "country": "USA",
    "state": "Texas",
    "population": "20M"
  },
  {
    "country": "USA",
    "state": "Alabama",
    "population": "4M"
  },
  {
    "country": "USA",
    "state": "California",
    "population": "33M"
  },
  {
    "country": "India",
    "state": "Maharashtra",
    "population": "112M"
  },
  {
    "country": "Japan",
    "state": "Tokyo",
    "population": "13M"
  },
  {
    "country": "India",
    "state": "Bihar",
    "population": "104M"
  },
  {
    "country": "USA",
    "state": "Florida",
    "population": "15M"
  },
  {
    "country": "India",
    "state": "Gujarat",
    "population": "60M"
  },
  {
    "country": "USA",
    "state": "Georgia",
    "population": "8M"
  },
  {
    "country": "Japan",
    "state": "Osaka",
    "population": "8M"
  },
  {
    "country": "Japan",
    "state": "Saitama",
    "population": "7M"
  },
  {
    "country": "India",
    "state": "Tamil Nadu",
    "population": "72M"
  }
]

如果代码在 javascript 中会更有帮助。谢谢:)

我试过这个：--

<body>
    <p>
<input type="button" style="margin:10px 0; "onclick = "populateSelect()" value = "Start" />
    </p>
    <select id="sel" onchange="show(this)">
        <option value="">-- Select --</option>
    </select>
</body>
<script>    

var ele = document.getElementById('sel');
          for (var i = 0; i < data.length; i++) {
              if(data[i]['country']!==undefined){
              ele.innerHTML = ele.innerHTML + '<option value="' + data[i]['country'] + '">' + data[i]['country'] + '</option>'; }

</script>

Answer 1

不确定您想要的方式，但这是我所做的。我使用 .map() 过滤唯一国家并将其解析为国家下拉列表。顺便说一句，一旦你选择了国家和州，我还使用了最后一部分的过滤来获得人口结果。

查看.map() and .filter了解更多信息

这是工作 JsFiddle

const data = [
    {
    "country": "USA",
    "state": "Texas",
    "population": "20M"
  },
  {
    "country": "USA",
    "state": "Alabama",
    "population": "4M"
  },
  {
    "country": "USA",
    "state": "California",
    "population": "33M"
  },
  {
    "country": "India",
    "state": "Maharashtra",
    "population": "112M"
  },
  {
    "country": "Japan",
    "state": "Tokyo",
    "population": "13M"
  },
  {
    "country": "India",
    "state": "Bihar",
    "population": "104M"
  },
  {
    "country": "USA",
    "state": "Florida",
    "population": "15M"
  },
  {
    "country": "India",
    "state": "Gujarat",
    "population": "60M"
  },
  {
    "country": "USA",
    "state": "Georgia",
    "population": "8M"
  },
  {
    "country": "Japan",
    "state": "Osaka",
    "population": "8M"
  },
  {
    "country": "Japan",
    "state": "Saitama",
    "population": "7M"
  },
  {
    "country": "India",
    "state": "Tamil Nadu",
    "population": "72M"
  }
];

$( () => {
    const countryArr= [... new Set(data.map(x => x.country))];
  
    countryArr.forEach((ele, index) => {
    $('#countryS').append(`<option value="${ele}">${ele}</option>`)
  });
  
  // After choosing country, showing the state
    $('#countryS').on('change', function(){
    // Reset the state array and drop down 
    var stateArr = [];
    $('#stateS').html(`<option value="">-- Select --</option>`);
    $('#showPopulation').val('');
    
    data.forEach((ele,idx) => {
        if(ele.country == this.value){
        stateArr.push(ele.state);
      }
    }) // End of data forEach function
    stateArr.forEach((ele, index) => {
      $('#stateS').append(`<option value="${ele}">${ele}</option>`)
    });
  });
  
  // After choosing the state, show the population
  $('#stateS').on('change', function(){
    let country         = $('#countryS').val();
    let state           = $('#stateS').val();
    let population  = data.filter(x => {
        return x.country == country && x.state == state;
    })[0]['population']
    
    //Parse the data to the input field
    $('#showPopulation').val(population);
  })
  
}) // End of onLoad function

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
  <span>Country</span>
  <select id="countryS">
    <option value="">-- Select --</option>
  </select>
  
  <span>State</span>
  <select id="stateS">
    <option value="">-- Select --</option>
  </select>
  
  <input id="showPopulation" placeholder="Population" readonly/>
  
</body>

将json数据绑定到html页面的两个依赖下拉列表中，并显示相应的数据

Bind json data into two dependent dropdown list in html page and display the corresponding data

html

javascript

jquery

json

dropdown