JavaScript를 사용하여 다른 드롭다운의 선택을 기반으로 한 드롭다운을 채우는 방법은 무엇입니까?

JavaScript를 사용하여 다른 드롭다운의 선택을 기반으로 한 드롭다운 채우기

다른 드롭다운에서 선택한 항목을 기반으로 한 드롭다운의 옵션을 동적으로 업데이트하는 작업에 직면했을 때, 데이터베이스 쿼리와 같은 불필요한 복잡성을 피하는 데 필수적입니다. AJAX 호출 없이 이를 수행하는 간단한 JavaScript 기반 솔루션을 살펴보겠습니다.

이 접근 방식을 설명하기 위해 두 개의 드롭다운 목록이 있는 시나리오를 고려해 보겠습니다. "색상"과 같은 옵션이 있는 드롭다운 A Shapes, "Names" 및 Dropdown B. Dropdown A에서 선택한 항목을 기반으로 Dropdown B에 옵션을 채우려고 합니다.

샘플 코드

다음 JavaScript 함수는 다음 JavaScript 함수를 사용하는 방법을 보여줍니다. 이 기능을 사용하려면:

<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);
}

HTML 마크업

다음 HTML 마크업에는 두 개의 드롭다운 목록이 포함되어 있습니다.

<code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2"></select></code>

사용

이 기능을 사용하려면 , 간단하게 구성DropDownLists 함수를 호출하여 첫 ​​번째 드롭다운(ddl1)과 두 번째 드롭다운(ddl2)을 인수로 전달합니다. 이 함수는 드롭다운 A에서 선택한 항목을 기반으로 드롭다운 B의 동적 채우기를 처리합니다.

이 코드 조각은 JavaScript를 사용하여 다른 드롭다운에서 선택한 항목을 기반으로 한 드롭다운을 동적으로 채울 수 있는 완전한 작업 솔루션을 보여줍니다. , 데이터베이스 호출이나 AJAX 요청이 필요하지 않습니다.

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