JS가 동기화 상태로 선택 유지 (jquery 없음)

Question

페이지에 두 개의 SELECT 요소가 있는데 첫 번째 요소가 변경된 경우 두 번째 요소가 변경된 경우 첫 번째 요소가 변경된 경우 두 번째 요소에 첫 번째 옵션을 제외한 나머지 요소가 모두 포함됩니다. 현재 첫 번째 항목에서 선택됩니다.

그들은 동일한 옵션으로 시작하고 필요할 경우 첫 번째 옵션을 선택할 때까지 두 번째 옵션을 비활성화 할 수 있습니다. 따라서, 내가 가지고있는 경우 :

... 
<select id="selectOne" onchange="someFuntion()"> 
    <option value="1">One</> 
    <option value="2">Two</> 
    <option value="3">Three</> 
</select> 

<select id="selectOne" onchange="someFuntion()"> 
    <option value="1">One</> 
    <option value="2">Two</> 
    <option value="3">Three</> 
</select> 
... 

... 두 개가 첫 번째로 선택되면 두 번째에서 제거해야합니다. 그런 다음 처음에 3 명이 선택되면 두 번째는 3을 제외하고 첫 번째에 나열된 모든 것을 갖습니다 (다시 2를 포함). 첫 번째 옵션은 절대로 변경되지 않으며 두 번째 옵션은 현재 선택된 옵션을 제외한 모든 옵션을 항상 첫 번째 옵션에 포함해야합니다. 이런 식으로 최선을 달성하는 방법에 대한 아이디어가 있습니까?

이 경우 JQuery를 혼합하여 가져올 수 없으므로 Jquery 관련 답변을 알려주세요. 그 이상으로 꽤 많이 열립니다. 첫 번째에서 선택한 초기 값을 두 번째에서 제거 할 수 있지만 거기에서 변경을 처리하는 방법을 모르겠습니다.

TIA!

Answer 1

selectTwo에서 옵션을 사용 중지하면 문제가 해결 될 수 있습니다. 그렇지 않은 경우 display : none 클래스를 사용하여 일치하는 옵션을 "숨기고"classList.add 및 classList.remove를 사용하여 비활성화 및 활성화하지 않고 숨기고 표시 할 수 있습니다.

여기서 hide 및 disable 메서드를 사용하면 제거 할 항목이 selectTwo에서 현재 선택된 항목이 될 가능성이 있습니다. 그 상황에서 어떤 전략도 훌륭하지 않습니다. 이를 피하는 경우 selectTwo의 값을 "양호한"값으로 설정하거나 selectTwo의 자식을 삭제하고 selectOne의 선택되지 않은 자식을 복제 한 다음 selectTwo에 값을 추가 할 수 있습니다.

제거/복제 전략의 예가 필요한 경우 알려 주시면 게시하겠습니다.

function selectClick(event) { 
 
    var that = document.querySelector("#selectTwo"); 
 
    var thatOptions = that.querySelectorAll("option"); 
 

 
    for (var i = 0; i < thatOptions.length; i++) { 
 
    thatOptions[i].disabled = (thatOptions[i].value === this.value); 
 
    } 
 
} 
 

 
document.querySelector("#selectOne").addEventListener("change", selectClick);

<select id="selectOne"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select> 
 

 
<select id="selectTwo"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select>