>source

Google 시트의 항목을 기반으로 체크 박스 드롭 다운 요소를 만드는 요소 선택을 만들었습니다.

내 HTML 코드는 다음과 같습니다.

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

내 자바 스크립트 코드는 다음과 같습니다.

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

내 Google Apps Script 기능은 다음과 같습니다.

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

Web App이로드되면 Google 시트의 값을 드롭 다운 확인란으로 Web App에로드합니다. 내 문제는 선택한 항목을 선택한 요소 선택에 표시하는 방법입니다. 요소 ID "체크 박스"의 값을 얻으려고했지만 정의되지 않은 것으로 표시됩니다. 제안이나 조언이 있습니까? 나는 여전히 해결책을 찾으려고 노력하고 있습니다. 도움을 주셔서 미리 감사드립니다.


  • 답변 # 1

    https://www.dyn-web.com/tutorials/forms/checkbox/group.php 링크에서 내 문제에 답하는 방법에 대한 아이디어를 얻었습니다. 배열에서 모든 선택/선택을 얻은 다음 웹 앱에 표시 할 수 있도록 수정했습니다.

    다음은 자바 스크립트에서 수정 된 기능입니다.

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

관련 자료

  • 이전 html - JavaScript에서 수정 된 카운터 애니메이션을 만드는 방법은 무엇입니까?
  • 다음 where 절의 JPA 사양 및 null 매개 변수