ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してドロップダウン ボックスのリンク効果を実現するにはどうすればよいですか?

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

WBOY
リリース: 2023-10-20 15:57:11
オリジナル
1319 人が閲覧しました

如何使用 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>
ログイン後にコピー
  1. 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 = '';
  }
});
ログイン後にコピー
  1. 効果の表示

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

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

概要:

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート