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>
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
jederzeit, siehe __EDIT__ über – WhiteHat
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