사용자 선택에 따라 드롭다운을 채우는 방법은 무엇입니까?

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

여러 드롭다운이 있는 양식을 개발할 때, 다른 선택이 이루어졌습니다. 이를 통해 선택 범위를 좁히고 데이터 입력을 더욱 효율적으로 만들어 보다 사용자 친화적인 환경을 제공할 수 있습니다.

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

<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 함수는 두 개의 드롭다운을 나타내는 두 개의 매개 변수 ddl1 및 ddl2를 사용합니다. 먼저 각 드롭다운에 표시될 옵션으로 배열을 초기화합니다.

다음으로, ddl1에서 선택한 항목을 처리하는 데 스위치 문이 사용됩니다. ddl1의 값에 따라 ddl2의 옵션을 지우고 적절한 옵션으로 채웁니다. createOption 함수는 각 옵션을 생성하고 ddl2에 추가하는 데 사용됩니다.

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>

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

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