데이터베이스 쿼리 없이 선택을 기반으로 드롭다운을 동적으로 채우는 방법은 무엇입니까?

선택 사항에 따라 드롭다운을 동적으로 채우기

다른 드롭다운에서 선택한 항목을 기반으로 한 드롭다운의 내용을 수정하는 작업에 직면할 때 JavaScript로 이 기능을 구현하는 방법이 중요합니다. 데이터베이스 쿼리가 필요한 상황과 달리 AJAX를 사용하지 않고도 이 프로세스를 단순화할 수 있습니다.

귀하를 돕기 위해 두 번째 드롭다운(드롭다운 B) 기반을 채우는 방법을 보여주는 간결하고 효과적인 JavaScript 코드 예제를 제공합니다. 첫 번째 드롭다운(드롭다운 A)에서 선택한 항목을 따릅니다. 이 코드에는 외부 데이터 검색이나 데이터베이스 쿼리가 포함되지 않습니다.

<code class="javascript">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 < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}</code>

이 코드에서는 드롭다운 B에 표시되어야 하는 값이 포함된 세 가지 배열(색상, 모양 및 이름)을 정의했습니다. Dropdown A의 각 해당 옵션.

사용자가 Dropdown A에서 옵션을 선택하면configureDropDownLists 함수가 호출됩니다. 선택한 옵션에 따라 이 함수는 드롭다운 B의 내용을 지우고 관련 배열의 적절한 값으로 다시 채웁니다.

HTML 문서에 두 개의 드롭다운을 만들고 onchange 이벤트를 사용하여 이 코드를 구현할 수 있습니다. 첫 번째 드롭다운에 핸들러를 추가하여 두 번째 드롭다운을 채우는 함수를 트리거합니다.

위 내용은 데이터베이스 쿼리 없이 선택을 기반으로 드롭다운을 동적으로 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!