JavaScript を使用してドロップダウン ボックスのリンク効果を実現するにはどうすればよいですか?

JavaScript を使用してドロップダウン ボックスのリンク効果を実現するにはどうすればよいですか?

Web ページの開発では、ドロップダウン ボックスのリンクは一般的なインタラクティブ効果です。 1 つのドロップダウン ボックスでオプションを選択すると、別のドロップダウン ボックスのオプションの内容が動的に変更され、2 つのドロップダウン ボックス間の連携が実現されます。この記事では、JavaScript を使用してドロップダウン ボックスの連動効果を実現する方法と、具体的なコード例を紹介します。

1. HTML 構造

まず、2 つのドロップダウン ボックスを作成し、それらに id 属性を追加して、JavaScript が選択できるようにする必要があります。以下は簡単な 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>

2. JavaScript コード

次に、JavaScript を使用してドロップダウン ボックスのリンクを実装します。具体的な実装アイデアは次のとおりです。

• 最初のドロップダウン ボックスのオプションが変更されると、onchange イベントがトリガーされます。
• onchange イベントでは、2 番目のドロップダウン ボックスのオプションは、最初のドロップダウン ボックスのオプション値に基づいて動的に生成されます。
• [州を選択してください] オプションが選択されている場合、2 番目のドロップダウン ボックスはオフになります。
• 特定の県を選択すると、その県の値に基づいて、対応する都市のオプションが 2 番目のドロップダウン ボックスに生成されます。

次に、具体的な 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 = '';
  }
});

3. 効果の表示

最後に、ブラウザーで効果を表示します。最初のドロップダウン ボックスで州のオプションを選択すると、2 番目のドロップダウン ボックスの都市のオプションが動的に変更されます。 「都道府県を選択してください」オプションが選択されている場合、2 番目のドロップダウン ボックスのオプションはクリアされます。

上記の手順により、JavaScript を使用してドロップダウン ボックスのリンク効果を実現することができました。

概要:

この記事では、JavaScript を使用してドロップダウン ボックスの連携効果を実現する方法を紹介し、具体的なコード例を示して説明します。この方法をマスターすると、Web ページにさらに対話性とダイナミクスを追加し、ユーザー エクスペリエンスを向上させることができます。この記事がお役に立てば幸いです!

以上がJavaScript を使用してドロップダウン ボックスのリンク効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。