1

Ich verwende eine Google-Visualisierungsabfrage, um Spaltenüberschriften von diesem spreadsheet zu ziehen. Zur Zeit muss ich die Zeilen- und Spaltenindizes für jede gewünschte Zelle in das Menü einfügen. Was ich möchte, ist ein Skript, das dieses Menü dynamisch mit Daten aus den Zellen in Zeile 1 der Tabelle füllt. Mit anderen Worten, machen Sie das Menü so groß oder so klein wie das, was in der Tabelle vorhanden ist.Erstellen/Auffüllen eines Dropdown-Menüs auf einer Webseite aus Google Spreadsheet-Daten

Ich glaube, ich brauche etwas wie das Folgende, aber ich bin mir nicht sicher, wie man es implementiert. Vielleicht brauche ich serverseitige Skript (GAS), um dies zu erreichen ??

<select> 
    for (var i = 0; i < data.length; ++i) { 
     <option>!= data[i] </option> 
    } 
    </select> 

Ich habe viel Dokumentation dies mit Googles Htmlservice zu erreichen, aber ich brauche, um dieses Menü gehostet wird einen anderen Dienst.

Jede Hilfe würde sehr geschätzt werden. Vielen Dank!

Mein aktueller Code folgt ...

google.load('visualization', '1', {'packages':['corechart']}); 
 
\t google.setOnLoadCallback(ValIDS); 
 
    
 
\t function ValIDS() { 
 
\t var queryValIDS = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY2'); 
 

 
\t queryValIDS.send(handleQueryValIDResponse); 
 
    } 
 
    
 
    \t function handleQueryValIDResponse(response) { 
 
      if (response.isError()) { 
 
       alert('Error in ID Validation Query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
       return; 
 
      } 
 

 
\t var datatable = response.getDataTable(); \t 
 
\t var cat1 = datatable.getValue(0,0); 
 
\t var cat2 = datatable.getValue(0,1); 
 
\t var cat3 = datatable.getValue(0,2); 
 
\t var cat4 = datatable.getValue(0,3); 
 
\t var cat5 = datatable.getValue(0,4); 
 
\t var cat6 = datatable.getValue(0,5); 
 
\t var cat7 = datatable.getValue(0,6); 
 
\t var cat8 = datatable.getValue(0,7); 
 
\t var cat9 = datatable.getValue(0,8); 
 
\t var cat10 = datatable.getValue(0,9); 
 
\t 
 
\t 
 
     
 
\t \t document.getElementById('cat1').innerHTML = cat1; 
 
\t \t document.getElementById('cat2').innerHTML = cat2; 
 
\t \t document.getElementById('cat3').innerHTML = cat3; 
 
\t \t document.getElementById('cat4').innerHTML = cat4; 
 
\t \t document.getElementById('cat5').innerHTML = cat5; 
 
\t \t document.getElementById('cat6').innerHTML = cat6; 
 
\t \t document.getElementById('cat7').innerHTML = cat7; 
 
\t \t document.getElementById('cat8').innerHTML = cat8; 
 
\t \t document.getElementById('cat9').innerHTML = cat9; 
 
\t \t document.getElementById('cat10').innerHTML = cat10; 
 
\t \t \t \t 
 
     
 
     } 
 

 
function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
window.onclick = function(event) { 
 
    if (!event.target.matches('.dropbtn')) { 
 

 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown a:hover {background-color: #f1f1f1} 
 

 
.show {display:block;} 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown a:hover {background-color: #f1f1f1} 
 

 
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 

 

 
<div class="dropdown"> 
 
<button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#"><div id="cat1"></div></a> 
 
    <a href="#"><div id="cat2"></div></a> 
 
    <a href="#"><div id="cat3"></div></a> 
 
\t <a href="#"><div id="cat4"></div></a> 
 
    <a href="#"><div id="cat5"></div></a> 
 
    <a href="#"><div id="cat6"></div></a> 
 
\t <a href="#"><div id="cat7"></div></a> 
 
    <a href="#"><div id="cat8"></div></a> 
 
    <a href="#"><div id="cat9"></div></a> 
 
\t <a href="#"><div id="cat10"></div></a> 
 
    
 
    </div> 
 
</div>

Antwort

2

können Sie clientseitige JavaScript verwenden, um die Drop-down-dynamisch
unter Verwendung der Daten aus den datatable

zu bauen Es gibt eine Reihe von Möglichkeiten, aber das sollte erreichen, was Sie brauchen

können Sie getNumberOfColumns anstatt Hartcodierung jedes Dropdown-Element verwenden
diese zusätzliche Spalten der Tabelle hinzugefügt ermöglicht werden,
ohne wurde den Code/html

for (var i = 0; i < datatable.getNumberOfColumns(); i++) { 
    var ddItem = document.getElementById('myDropdown').appendChild(document.createElement('A')); 
    ddItem.href = '#'; 
    var ddItemContent = ddItem.appendChild(document.createElement('SPAN')); 
    ddItemContent.id = 'cat' + (i + 1); 
    ddItemContent.innerHTML = datatable.getValue(0, i); 
} 

(i + 1) verwendet ändern zu müssen oben auf die id,
nur so wäre die id das gleiche sein wie das, was Sie hartcodierte

hatten

seit Anker (<a>) sind Inline-Elemente, 012

siehe folgende Arbeits Schnipsel ein <span> verwendet anstelle von <div>

Sie nicht einmal id benötigen, oder die SPAN was das betrifft,
da die Drop-down-Elemente dynamisch

erstellt werden ...

google.load('visualization', '1', {'packages':['corechart']}); 
 
google.setOnLoadCallback(ValIDS); 
 

 
function ValIDS() { 
 
    var queryValIDS = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY2'); 
 
    queryValIDS.send(handleQueryValIDResponse); 
 
} 
 

 
function handleQueryValIDResponse(response) { 
 
    if (response.isError()) { 
 
    alert('Error in ID Validation Query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
    return; 
 
    } 
 

 
    var datatable = response.getDataTable(); 
 
    for (var i = 0; i < datatable.getNumberOfColumns(); i++) { 
 
    var ddItem = document.getElementById('myDropdown').appendChild(document.createElement('A')); 
 
    ddItem.href = '#'; 
 
    var ddItemContent = ddItem.appendChild(document.createElement('SPAN')); 
 
    ddItemContent.id = 'cat' + (i + 1); 
 
    ddItemContent.innerHTML = datatable.getValue(0, i); 
 
    } 
 
} 
 

 
function myFunction() { 
 
    document.getElementById('myDropdown').classList.toggle('show'); 
 
} 
 

 
window.onclick = function(event) { 
 
    if (!event.target.matches('.dropbtn')) { 
 
    var dropdowns = document.getElementsByClassName('dropdown-content'); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown a:hover {background-color: #f1f1f1} 
 

 
.show {display:block;} 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown a:hover {background-color: #f1f1f1} 
 

 
.show {display:block;}
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"></div> 
 
</div>

EDIT

die getValue Methode zwei Argumente

getValue(rowIndex, columnIndex)

sowohl rowIndex und columnIndex werden braucht Null basierende ,
bedeutet die erste Zelle Wert getValue(0, 0)

wenn Sie Werte ziehen aus der ersten Spalte jeder Zeile ...

Verwendung i als rowIndex und 0 als columnIndex

for (var i = 0; i < datatable.getNumberOfRows(); i++) { 
    var test = datatable.getValue(i, 0); 
} 
+0

WhiteHat wollen würde du bist unglaublich! Entschuldigung, ich musste den Computer verlassen und meine Sitzung wurde abgebrochen. Danke, dass Sie sich die Zeit genommen haben, den Code zu erklären. Nur eine weitere Frage, bitte ... Ich habe versucht, '(var i = 0; i firenemus

+0

jederzeit, siehe __EDIT__ über – WhiteHat

+0

Ah, natürlich !!! Als Mittelschullehrerin schätze ich Ihre Geduld sehr, während ich langsam lerne. Ich meine es ernst mit diesem Bier. Du hast mir so sehr geholfen. Hast du einen PayPal Account? Ich möchte dir ein paar Dollar für deine Zeit schicken. Danke noch einmal! – firenemus

Verwandte Themen