선택 항목에 따라 드롭다운 채우기

여러 드롭다운이 있는 양식을 개발할 때 다음을 기준으로 하나의 드롭다운에 옵션을 채우는 것이 유용할 수 있습니다. 다른 사람이 선택한 것입니다. 이를 통해 선택 사항을 좁히고 데이터 입력을 더욱 효율적으로 만들어 보다 사용자 친화적인 환경을 제공할 수 있습니다.

이 기능을 달성하는 한 가지 접근 방식은 JavaScript를 사용하여 종속 드롭다운의 콘텐츠를 동적으로 업데이트하는 것입니다. 다음은 다른 드롭다운(A)의 선택을 기반으로 하나의 드롭다운(B)을 채우는 방법을 보여주는 예입니다.

function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i 
이 JavaScript 함수는 두 개의 드롭다운을 나타내는 두 개의 매개변수 ddl1 및 ddl2를 사용합니다. 먼저 각 드롭다운에 표시될 옵션을 사용하여 배열을 초기화합니다.
다음으로 스위치 문은 ddl1에서 선택한 항목을 처리하는 데 사용됩니다. ddl1의 값에 따라 ddl2의 옵션을 지우고 적절한 옵션으로 채웁니다. createOption 함수는 각 옵션을 생성하고 ddl2에 추가하는 데 사용됩니다.
HTML에서는 두 개의 드롭다운을 정의해야 합니다.

  
  Colours
  Shapes
  Names



사용자가 ddl1에서 옵션을 선택하면 onchange 이벤트가 그에 따라 ddl2의 옵션을 업데이트하는configureDropDownLists 함수를 트리거합니다. 이 접근 방식은 다른 드롭다운 선택 항목을 기반으로 한 드롭다운을 채우는 편리한 방법을 제공하여 양식의 유용성을 향상시킵니다.