JavaScript를 사용하여 드롭다운 콘텐츠를 동적으로 채우는 방법은 무엇입니까?

Javascript를 통한 동적 드롭다운 채우기

선택한 항목에 따라 한 드롭다운(B)의 콘텐츠를 채워야 하는 시나리오의 경우 JavaScript를 사용하는 또 다른 드롭다운(A)에서는 복잡한 AJAX 쿼리가 필요하지 않습니다. 대신 다음 코드 조각을 활용하여 이 작업을 수행할 수 있습니다.

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

이 코드를 활용하려면 해당 코드를 JavaScript 파일에 포함하고 구성DropDownLists 함수를 첫 번째 드롭다운에 대한 onChange 이벤트 핸들러로 등록하세요(A). :

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

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

이 코드는 첫 번째 드롭다운(ddl1)의 선택 항목을 기반으로 두 번째 드롭다운(ddl2)을 채우는 방법을 보여 주며, 스위치 케이스 논리를 활용하여 ddl2의 콘텐츠를 동적으로 결정합니다.

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