根据下拉选择使用 .load 填充 div

Question

好吧，这感觉像是一件基本的事情，但我正在努力让它发挥作用 - 我想要完成的是一个下拉列表，其中一个县约45个县，当一个人中，身体中的空的div会用另一个html页面加载div（我要容纳45个相应的div位置信息）。

打算使用 ajax 加载样式事件

<script>
$(document).ready(function(){
        $("#county-result").load("county_list.html #county1");
});
</script>

但为了使脚本不那么繁重，我希望下拉值是其匹配的县 div id 以填充加载函数的那部分（而不是编写 45 个单独的）

关于如何做到这一点的想法？

Answer 1

我为你创建了一个plunkr！希望对你有帮助

我基本上在这里做的是，我正在向选择（下拉菜单）添加一个更改事件侦听器，并且我确保国家 html 文件中的 div 与我在主文件中的选项值具有相同的 id（您将拥有下拉菜单的那个）

所以如果你想要关于德国的信息，你必须确保国家选项和 div 看起来有点像这样

<option value="germany">germany</option>

<div id="germany">
    <h1>Berlin</h1>
</div>

Answer 2

这个问题有点笼统。但是，如果我需要处理与 45 个县相关的信息并需要显示从下拉列表中选择的县的信息，我会使用 JSON 作为我的数据源并使用模板填充 div 并遍历 JSON 对象和正在寻找选定的 id。

下面是一个如何工作的例子。请注意，我实际上是根据数据集本身动态构建选择框选项，并且该设置允许您在需要时轻松更新数据。

注意如何获取 JSON 取决于您。我已经为此示例进行了硬编码，但您可以通过 ajax 请求或使用 .get()、.load() 等来获取它。

var myCountyInfo = {
  counties: [{
    name: 'County 1',
    id:123,
    locationInfo: {
      lat: 453245,
      lng: 45545,
      avgTemp: '75f',
      population: '5 B.'
    }
  }, {
    name: 'County 2',
    id:456,
    locationInfo: {
      lat: 11221,
      lng: 542222,
      avgTemp: '59f',
      population: '2 B.'
    }
  }, {
    name: 'County 3',
    id:789,
    locationInfo: {
      lat: 88555,
      lng: 54757,
      avgTemp: '58f',
      population: '1 B.'
    }
  }]
}

function populateSelectBoxes($select, data) {
  var counties = [];
  $.each(data, function() {
    counties.push('<option value="'+this.id+'">' + this.name + '</option>');
  });
  $select.append(counties.join(''));
}

function populateTableRow($tableBody, data, selectedCountyId) {
  var county;
  $.each(data, function() {
    if (this.id == selectedCountyId) {
      county = this;
      return false;
    }
  });
  $tableBody.html('<tr>'+
                     '<td>' + county.name + '</td>'+
                     '<td>' + county.locationInfo.lat +'</td>'+
                     '<td>' + county.locationInfo.lng + '</td>'+
                     '<td>' + county.locationInfo.avgTemp + '</td>'+
                     '<td>' + county.locationInfo.population + '</td>'+
                  '</tr>');


}
populateSelectBoxes($('#my-select'), myCountyInfo.counties);

$('#my-select').change(function() {
  var $this = $(this);
  var selection = $this.val();
  populateTableRow($('#my-table tbody'), myCountyInfo.counties, selection);
});

td,th{
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="my-select"></select>

<table id="my-table" border="1">
  <thead>
    <tr>
      <th>County</th>
      <th>Lat.</th>
      <th>Lng.</th>
      <th>Avg Temp</th>
      <th>Population</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>