Saya membuat Elemen Pilih yang membuat elemen dropdown Kotak Centang berdasarkan item di lembar Google.

Ini kode HTML saya:

<div class="form-row">
<div class="multiselect form-group">
<div class="selectBox" onclick="showCheckboxes()">
<select class="form-control" >
<option>Select an option</option>
</select>
<div class="overSelect" ></div>
</div>
<div id="checkboxes">
</div>
</div>

Ini kode javascript saya:

<script>
document.addEventListener("DOMContentLoaded", afterLoad);
document.getElementById("checkboxes").addEventListener("change", loadDisplayPos);

function afterLoad(){
google.script.run.withSuccessHandler(loadPosApp).checkPosApp();
}

function loadPosApp(postOpen){

   postOpen.forEach(function(r){
     
   var checkbox = document.createElement('input');
   checkbox.type = 'checkbox';
   checkbox.value = r[0];
 
   var label = document.createElement('label')
   label.appendChild(checkbox);
   label.appendChild(document.createTextNode(" " + r[0]));
  
   var content = document.getElementById('checkboxes');
   content .appendChild(label);
   });
}

function loadDisplayPos(){
  var contentCheck = document.getElementById('checkboxes').value;
  console.log(contentCheck);
}

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

</script>

Inilah fungsi Skrip Google Apps saya:

function checkPosApp()
{
  const ss = SpreadsheetApp.openByUrl(url);
  const ws = ss.getSheetByName("VacantPositions_Data");
  //const myDates = ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues();
  var postOpen = ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues();
  Logger.log(postOpen)
  return postOpen;
}

Setelah memuat Aplikasi Web, itu akan memuat nilai-nilai dari lembar Google ke Aplikasi Web sebagai kotak centang dropdown. Masalah saya adalah bagaimana menampilkan item yang dicentang ke Elemen Pilih seperti yang dipilih. Saya mencoba mendapatkan nilai "kotak centang" ID elemen tetapi dikatakan tidak terdefinisi. Apakah Anda punya saran atau saran? Saya masih mencoba mencari solusi. Terima kasih sebelumnya untuk bantuan.

-1
Glenn Perey 19 November 2020, 11:14

1 menjawab

Jawaban Terbaik

Saya mendapat ide tentang cara menjawab masalah saya di tautan ini: https: //www.dyn-web.com/tutorials/forms/checkbox/group.php. Saya baru saja memodifikasinya sedemikian rupa sehingga saya bisa mendapatkan semua yang diperiksa/dipilih dalam array kemudian menampilkannya di Aplikasi Web

Berikut adalah fungsi yang dimodifikasi dalam javascript.

function loadDisplayPos(){
  var element = document.getElementById('checkboxes');
  var tops = element.getElementsByTagName('input');
  var tags = [];

  for (var i=0, len=tops.length; i<len; i++) {
    if ( tops[i].type === 'checkbox' ) {
      if (tops[i].checked){
         tags.push( tops[i].value);
        }
    }
}
 var selectedPost = document.getElementById('posapp').innerHTML= tags;

}
0
Glenn Perey 23 November 2020, 04:15