如何在 jquery 移动设备中使用 json 文件创建动态下拉菜单

Question

我有一个巨大的 (8 MByte table)，我想用一个小的 javascript 应用程序对其进行过滤。

逻辑是这样的：

国家
地区
技能。

我只接受一个国家作为过滤器和一个地区，但接受多种技能。根据这些信息，我想显示一个 table 的信息。我不明白的是如何 link javascript 部分与 HTML 部分。如何从数组中插入动态信息而不是 HTML。（在最终版本中，我将用 json 个文件替换数组）。

感谢您的支持。

var country = [
  ["Australia", "AU"],
  ...
  ["Thailand", "TH"]
  ];
var skill = [
  ["AU", "Queensland", "Skill 1"],
  ["AU", "Queensland", "..."],
  ["AU", "Queensland", "Skill n"],
  ["AU", "Western Territory", "Skill 1"],
  ...
  ];
  
  
  
  
 function initCountry(){
   var CountryValue = "AU";
 }
  
  
  
  
  
  function startup() {
     initCountry();
     initRegion();
     initSkill();
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <link rel="stylesheet" href="cs/jquery.mobile.css" />
    <link rel="stylesheet" href="cs/basis.css" />
 <script src="js/jquery.js" type="text/javascript"></script>
 <script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
</head>
<body onload="startup()">
<form id="FilterForm" name="FilterForm">
 <label for="select-custom-20">Countries</label>
    <select name="select-custom-20" id="select-custom-20" data-native-menu="false">
  <option value= "AU">Australia</option>
...
  <option value= "TH">Thailand</option>
    </select>
</div>
<div class="ui-field-contain">
    <label for="select-custom-19">Region:</label>
    <select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
        <option>Choose options</option>
        <option value="1" selected="selected">Average</option>
        <option value="2">Region 1</option>
        <option value="3">Region 2</option>
        <option value="4">...</option>
  <option value="5">Region n</option>
    </select>
</div>
<div class="ui-field-contain">
    <label for="select-custom-19">Skill:</label>
    <select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
        <option>Choose options</option>
        <option value="A" selected="selected">Average</option>
        <option value="1">Skill 1</option>
  ...
        <option value="T">Skill n</option>
 </select>
</div>
</form>
<table>
<tr>
<td>
Data depending on the filter
</td>
</tr>
</table>
</body>
</html>

Answer 1

给你的table一个ID：

<table id="filteredTable" data-role="table"  data-mode="reflow" class="ui-responsive">
  <thead>
    <tr>
      <th>Country</th>
      <th>Region</th>
      <th>Skill</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

然后当您拥有过滤后的技能列表时，使用 JavaScript 循环构建 HTML，清空 table 并添加新内容：

  var rowsHTML = '';
  for (var i=0; i< skill.length; i++){
    rowsHTML += '<tr>';
    rowsHTML += '<td>' + skill[i][0] + '</td>';
    rowsHTML += '<td>' + skill[i][1] + '</td>';
    rowsHTML += '<td>' + skill[i][2] + '</td>';
    rowsHTML += '</tr>';    
  }  
  $("#filteredTable tbody").empty().append(rowsHTML);

如何在 jquery 移动设备中使用 json 文件创建动态下拉菜单

How to create dynamic dropdown menus with json files in jquery mobile

javascript

json

filter

jquery-mobile

drop-down-menu

DEMO