CSS 및 Javascript를 사용하여 드롭다운 메뉴에서 옵션 선택

Question

CSS 선택기 값이 있습니다:

.ng-touched > div:nth-child(1) > div:nth-child(2) )> 입력:n번째-자식(1)

드롭다운 메뉴가 있는 CSS 선택기를 찾기 위해 document.querySelectorAll을 사용하려고 합니다. 텍스트가 "APPLE"인 옵션을 선택합니다. 드롭다운 메뉴의 두 번째 옵션이다. 이를 위해 다음 코드를 사용하고 있지만 코드를 실행한 후 "APPLE" 옵션이 선택되지 않았습니다.

document.querySelectorAll(".ng-touched > div:nth-child(1) > div:nth-child(1) > div :nth-child(2) > 입력:nth-child(1)')
  .forEach(o => {
     o.value = "사과";;
  });

무엇이 잘못되었는지, 코드에 어떤 필요한 변경 사항을 적용해야 하는지 안내해 주세요. 미리 감사드립니다.

Answer 1

HTML 구조에 문제가 있는 것 같습니다. input元素不包含options；select元素才包含。我的代码片段向您展示了如何以编程方式将select 드롭다운 메뉴 값은 두 번째 옵션인 APPLE에 할당됩니다.

기존 구조(쿼리에서 파생됨)도 사용하지만 마지막 요소는 더 이상 사용되지 않습니다. input，而是使用select，因为从语义上讲，input与options 이는 논리적이지 않습니다. 따라서 내 설명이 틀리면 내 솔루션이 귀하의 질문에 정확하게 대답하지 못할 수도 있습니다. 하지만 그것이 여전히 당신을 올바른 방향으로 안내해주기를 바랍니다.

으아악 으아악