> 웹 프론트엔드 > JS 튜토리얼 > 드롭다운 상자 연결 효과를 얻기 위해 JavaScript를 사용하는 방법은 무엇입니까?

드롭다운 상자 연결 효과를 얻기 위해 JavaScript를 사용하는 방법은 무엇입니까?

WBOY
풀어 주다: 2023-10-20 15:57:11
원래의
1319명이 탐색했습니다.

如何使用 JavaScript 实现下拉框联动效果?

JavaScript를 사용하여 드롭다운 상자 연결 효과를 얻는 방법은 무엇입니까?

웹 페이지 개발에서 드롭다운 상자 연결은 일반적인 대화형 효과입니다. 하나의 드롭다운 상자에서 옵션을 선택하여 다른 드롭다운 상자의 옵션 내용을 동적으로 변경함으로써 둘 사이의 연결을 달성합니다. 이 기사에서는 JavaScript를 사용하여 드롭다운 상자의 연결 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 첨부합니다.

  1. HTML 구조

먼저 두 개의 드롭다운 상자를 만들고 JavaScript가 선택할 수 있도록 ID 속성을 추가해야 합니다. 다음은 간단한 HTML 구조의 예입니다.

<select id="province">
  <option value="0">请选择省份</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广东</option>
</select>

<select id="city">
  <option value="0">请选择城市</option>
</select>
로그인 후 복사
  1. JavaScript code

다음으로 JavaScript를 사용하여 드롭다운 상자의 연결을 구현합니다. 구체적인 구현 아이디어는 다음과 같습니다.

  • 첫 번째 드롭다운 상자의 옵션이 변경되면 onchange 이벤트가 트리거됩니다.
  • onchange 이벤트에서는 첫 번째 드롭다운 상자의 옵션 값을 기반으로 두 번째 드롭다운 상자의 옵션이 동적으로 생성됩니다.
  • "지방을 선택하세요" 옵션을 선택하면 두 번째 드롭다운 상자에서 옵션이 지워집니다.
  • 특정 지역을 선택하면 지역 값에 따라 두 번째 드롭다운 상자에 해당 도시 옵션이 생성됩니다.

다음은 특정 JavaScript 코드 예입니다.

// 获取下拉框元素
const provinceDropdown = document.getElementById('province');
const cityDropdown = document.getElementById('city');

// 给第一个下拉框添加 onchange 事件
provinceDropdown.addEventListener('change', function() {
  // 获取选择的省份值
  const selectedProvince = provinceDropdown.value;

  // 根据选择的省份值生成相应的城市选项
  if (selectedProvince === "1") {
    // 清空第二个下拉框的选项
    cityDropdown.innerHTML = '';

    // 添加北京的选项
    const option = document.createElement('option');
    option.value = '1';
    option.text = '北京';
    cityDropdown.add(option);
  } else if (selectedProvince === "2") {
    // 清空第二个下拉框的选项
    cityDropdown.innerHTML = '';

    // 添加上海的选项
    const option = document.createElement('option');
    option.value = '2';
    option.text = '上海';
    cityDropdown.add(option);
  } else if (selectedProvince === "3") {
    // 清空第二个下拉框的选项
    cityDropdown.innerHTML = '';

    // 添加广东的选项
    const option = document.createElement('option');
    option.value = '3';
    option.text = '广东';
    cityDropdown.add(option);
  } else {
    // 选择了“请选择省份”,清空第二个下拉框的选项
    cityDropdown.innerHTML = '';
  }
});
로그인 후 복사
  1. 효과 표시

마지막으로 브라우저에서 효과를 확인합니다. 첫 번째 드롭다운 상자에서 지방 옵션을 선택하면 두 번째 드롭다운 상자의 도시 옵션이 동적으로 변경됩니다. "지방을 선택하세요" 옵션을 선택하면 두 번째 드롭다운 상자의 옵션이 지워집니다.

위 단계를 통해 JavaScript를 사용하여 드롭다운 상자의 연결 효과를 성공적으로 구현했습니다.

요약:

이 글에서는 JavaScript를 사용하여 드롭다운 상자 연결 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 통해 설명합니다. 이 방법을 익히면 웹 페이지에 더 많은 상호 작용성과 역동성을 추가하고 사용자 경험을 향상시킬 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 드롭다운 상자 연결 효과를 얻기 위해 JavaScript를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿