So erstellen Sie dynamische Dropdown-Menüs mit JSON-Dateien in Jquery Mobile

Ich habe eine riesige (8 MByte Tabelle), die ich mit einer kleinen Javascript-Anwendung filtern möchte.So erstellen Sie dynamische Dropdown-Menüs mit JSON-Dateien in Jquery Mobile

Die Logik geht so:

Länder
Regionen
Fähigkeiten.

Ich würde nur ein Land als Filter und eine Region akzeptieren, aber mehrere Fähigkeiten. Abhängig von diesen Informationen möchte ich eine Tabelle mit Informationen anzeigen. Was ich nicht verstehe, ist, wie man den Javascript-Teil mit dem HTML-Teil verbindet. Wie fügt man anstelle der HTML die dynamischen Informationen aus dem Array ein. (In der endgültigen Version würde ich die Arrays durch JSON-Dateien ersetzen).

Vielen Dank für Ihre Unterstützung.

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" /> 
 
\t <script src="js/jquery.js" type="text/javascript"></script> 
 
\t <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"> 
 
\t \t <option value= "AU">Australia</option> 
 
... 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t ... 
 
     <option value="T">Skill n</option> 
 
\t </select> 
 
</div> 
 
</form> 
 
<table> 
 
<tr> 
 
<td> 
 
Data depending on the filter 
 
</td> 
 
</tr> 
 
</table> 
 
</body> 
 
</html>

Quelle

2016-05-04 BSerMann

Geben Sie Ihren Tisch eine 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>

Dann, wenn Sie die gefilterte Liste der Fähigkeiten, baut die HTML eine JavaScript-Schleife, leert die Tabelle mit und fügen die neuer Inhalt:

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);

Quelle

2016-05-04 13:31:23 ezanker

So erstellen Sie dynamische Dropdown-Menüs mit JSON-Dateien in Jquery Mobile

Antwort

Verwandte Themen