SweetAlert 드롭 다운 목록에 항목을 동적으로 추가하십시오.

현재 대화 상자에서 사용자의 입력을 캡처하는 데 sweetalert2를 사용하고 있습니다. 연결 대기열 대화 상자에서 드롭 다운을 사용하고 싶지만 드롭 다운 목록에 항목을 동적으로 추가하는 방법을 찾지 못하는 것 같습니다. JSON 형식에서 데이터를 검색하여 드롭 다운 목록에 넣으려는 경우이를 수행 할 수있는 방법이 있습니까?SweetAlert 드롭 다운 목록에 항목을 동적으로 추가하십시오.

function userInput() { 
    swal.setDefaults(
     { 
      showLoaderOnConfirm: true, 
      confirmButtonText: 'Next &rarr;', 
      showCancelButton: true, 
      animation: true, 
      progressSteps: ['1', '2', '3'] 
     } 
    ); 

    var steps = [ 
     { 
      text: 'Select an author to analyze the commit', 
      input: 'select', 
      inputOptions: { 
       'SRB': 'Serbia',  // How do I dynamically set value? 
       'UKR': 'Ukraine', 
       'HRV': 'Croatia' 
      } 
     }, 
     { 
      text: 'Select multiple authors to compare their commits', 
      input: 'select', 
      inputOptions: { 
       'SRB': 'Serbia',  // How do I dynamically set value? 
       'UKR': 'Ukraine', 
       'HRV': 'Croatia' 
      } 
     }, 
     { 
      text: 'Select a file directory to analyze all author\'s commit', 
      input: 'select', 
      inputOptions: { 
       'SRB': 'Serbia',  // How do I dynamically set value? 
       'UKR': 'Ukraine', 
       'HRV': 'Croatia' 
      } 
     } 
    ]; 

    swal.queue(steps).then(function(result) { 
     swal.resetDefaults(); 
     swal({ 
      type: 'success', 
      title: 'Success', 
      text: 'Scroll down for statistics!', 
      html: 
       'Your selections: <pre>' + 
       JSON.stringify(result) + 
       '</pre>', 
      confirmButtonText: 'Ok', 
      showCancelButton: false 
     }) 
    }, function() { 
     swal.resetDefaults() 
    }) 
}

는 JSON 형식으로 데이터를 검색하십시오 SweetAlert2 documentation 말한다

function getData(repolink) { 
readDataFromGit('https://api.github.com/repos/' + repolink + '/git/trees/master?recursive=1', function(text){ 
     data = JSON.parse(text); 
     $.each(data, function(i, v) { 
      // Retrieve v.login data! 
      data = v.login; 
     }) 
    }); 
} 

function readDataFromGit(link, callback) { 
    var request = new XMLHttpRequest(); 
    request.overrideMimeType("application/json"); 
    request.open('GET', link, true); 
    request.onreadystatechange = function() { 
     if (request.readyState === 4 && request.status == "200") { 
      callback(request.responseText); 
     } 
    }; 
    request.send(null); 
}

출처

2016-10-27 stackyyflow

으로 inputOptions 매개 변수 object 또는 Promise이 될 수 있습니다. inputOptions 매개 변수에 대한 약속이 해결 될 때까지 SweetAlert2 자동 로더를 보여줄 것이다,

var inputOptionsPromise = new Promise(function (resolve) { 
 
    // get your data and pass it to resolve() 
 
    setTimeout(function() { 
 
    resolve({ 
 
     '#FF0000': 'Red', 
 
     '#00FF00': 'Green', 
 
     '#0000FF': 'Blue' 
 
    }) 
 
    }, 2000) 
 
}) 
 

 
swal({ 
 
    input: 'select', 
 
    inputOptions: inputOptionsPromise 
 
})

<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>

주의 사항 :

당신이 약속을 사용해야 동적으로 선택 항목을 채우려면, 여기에 간단한 예제 또는 거부되었습니다.

출처

2016-10-27 23:29:48

SweetAlert 드롭 다운 목록에 항목을 동적으로 추가하십시오.

답변

관련 문제