DOM 객체를 사용하여 백업 배열 만들기

Question

<select> 요소 이 다른 option과 같습니다. 페이지를로드 할 때, 나는이 option을 백업으로 저장하려고합니다 (저는 window.onload으로 이것을 수행합니다).

이제 사용자 <select> 소자 <select> 소자 일부 option의 제거 B를 변화시킨다. <select> 요소 b의 다른 변경 사항을 적용한 후 초 요소 을 시작에서 백업하여 복원하려고합니다.

그러나 무엇이든지간에 option의 변경 사항은 두 배열에 모두 적용되는 것처럼 보입니다.

new Array 및 push으로 백업 어레이를 만들고 option 각각을 새 어레이에 편집했습니다. 나는 이것이 DOM으로부터 제거 될 때 배열로부터 제거되는 것을 막을 수 있기를 희망했다.

이 문제를 어떻게 해결할 수 있습니까?

document.getElementById("selectElement").options[i].remove(); 

Answer 1

1. 배열 위에 루프 for in 사용하지 마십시오

   function cacheOptions() { 
       backupOptions = newArray(document.getElementById("selectElement").options); 
   } 
   
   function newArray(oldArray) { 
       var newArray = new Array(oldArray.length); 
       for (var object in oldArray) { 
        newArray.push(object); 
       } 
       return newArray; 
   } 
   

   그리고

   ---

   onchange 방법에서 option의 제거 ...; 보통 for 루프 사용
2. arr = []으로 배열을 만들 수 있습니다. 길이가 자동으로 설정됩니다.
3. 이전 배열의 색인을 새 배열에 추가합니다. 값이 아닙니다.

어쨌든 [].slice.call(arr)을 사용하면 배열과 유사한 객체에서 배열을 가져올 수 있습니다.

그래서, 당신은 가장 newArray 기능을 제거하고에 cacheOptions 기능을 변경 얻을 것 :

function cacheOptions() { 
    backupOptions = [].slice.call(document.getElementById("selectElement").options); 
}