從Google電子表格數據構建/填充網頁上的下拉菜單

我正在使用Google可視化查詢從此spreadsheet中提取列標題。目前，我必須在菜單中包含我想要的每個單元格的行和列索引。我想要的是一個腳本，它將使用電子表格第1行中單元格的數據動態填充此菜單。換句話說，使菜單與電子表格上的內容一樣大或小。從Google電子表格數據構建/填充網頁上的下拉菜單

我相信我需要類似以下的東西，但我不確定如何實現它。也許我需要服務器端腳本（GAS）來完成這個？

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

我發現大量的文檔來完成這個使用谷歌的HTMLService，但我需要這個菜單來使用不同的服務託管。

任何幫助將不勝感激。謝謝！

我當前的代碼如下...

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>

來源

2016-07-29 firenemus

您可以使用客戶端JavaScript建立動態
使用從datatable

數據下拉有很多方法，但是這應該完成你所需要的東西

可以使用getNumberOfColumns，而不是硬編碼每個下拉項
這將允許其他列被添加到電子表格中，
而無需更改代碼/ 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)使用上面的id，
只是這樣的id將是一樣的，你有硬編碼

自錨（<a>）是內聯元素是什麼，
一個<span>被用來代替<div>

你可能甚至不需要id，或SPAN對於這個問題，
因爲這些被動態

創建見下工作片斷下拉項目...

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

的getValue方法有兩個參數

getValue(rowIndex, columnIndex)

既rowIndex和columnIndex是從零開始，
意味着第一個單元格的值是getValue(0, 0)

，如果你想從每一行的第一列拉值...

使用i作爲rowIndex和0爲columnIndex

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

來源

2016-07-29 20:05:08 WhiteHat

的WhiteHat你真棒！對不起，我不得不離開電腦，我的會話超時。感謝您花時間解釋代碼。還有一個問題，請......我嘗試過使用'（var i = 0; i firenemus

隨時可以看到__EDIT__以上 – WhiteHat

啊，當然!!!作爲一名中學老師，我真的很感謝你的耐心，因爲我正在慢慢學習。我對那啤酒很認真。你幫了我很多。你有PayPal賬戶嗎？我想送你幾塊錢給你。再次感謝！ – firenemus

從Google電子表格數據構建/填充網頁上的下拉菜單

回答

相關問題