JavaScript を使用してドロップダウン ボックス機能を実装する方法

はじめに

フォームのドロップダウン ボックスは、一般的に使用される対話型コンポーネントであり、ユーザーが必要なオプションをより迅速かつ便利に選択するのに役立ちます。この記事では、JavaScript を使用してドロップダウン ボックス機能を実装する方法を説明します。

HTML 構造

最初に、<select> タグと複数の <option> タグを含む HTML 構造を作成する必要があります。 <select> ラベルはドロップダウン ボックス コンテナを表し、<option> ラベルはドロップダウン ボックスのオプション、および各 ## の value 属性を表します。 #<option> label オプションの値を表し、<option> タグの内容はオプションの名前を表します。

<select id="selectList" onchange="changeOption()">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
</select>

JavaScript の実装

JavaScript では、

<select> タグの value 属性を取得することで、現在選択されているオプションの値を取得できます。 <select> タグの selectedIndex 属性を取得することで、現在選択されているオプションのインデックスを取得できます。

var selectList = document.getElementById("selectList");

var selectedValue = selectList.value; // 获取当前选中选项的值
var selectedIndex = selectList.selectedIndex; // 获取当前选中选项的索引

ドロップダウン ボックスのエクスペリエンスを向上させるには、JavaScript を使用してドロップダウン ボックスのオプションの状態切り替え機能を実装する必要があります。 onclick イベントを

<select> タグに追加し、<select> タグの size 属性を適切な値に設定して表示することで、ドロップダウン ボックスをシミュレートできます。すべてのオプション。同時に、CSS スタイルを使用してドロップダウン ボックスのスタイルを美しくすることができます。

function toggleSelectList() {
  var selectList = document.getElementById("selectList");

  if (selectList.size === 1) {
    selectList.style.display = "block";
    selectList.size = selectList.options.length;
  } else {
    selectList.style.display = "none";
    selectList.size = 1;
  }
}

select {
  display: none; /* 隐藏下拉框 */
  width: 100%;
  padding: .5rem;
  font-size: 1rem;
  border: none;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

イベントのバインド

最後に、上記の JavaScript コードを HTML 構造およびイベントにバインドする必要があります。ここでは、HTML タグの

onchange イベントとカスタム toggleSelectList 関数を使用して、ドロップダウン ボックス リストをポップアップまたは非表示にします。

<select id="selectList" onchange="changeOption()" onclick="toggleSelectList()">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
</select>

function changeOption() {
  var selectList = document.getElementById("selectList");
  var selectedValue = selectList.value;
  console.log(selectedValue);
  toggleSelectList();
}

完全なコード

HTML構造

<select id="selectList" onchange="changeOption()" onclick="toggleSelectList()">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
</select>

JavaScript実装

function toggleSelectList() {
  var selectList = document.getElementById("selectList");

  if (selectList.size === 1) {
    selectList.style.display = "block";
    selectList.size = selectList.options.length;
  } else {
    selectList.style.display = "none";
    selectList.size = 1;
  }
}

function changeOption() {
  var selectList = document.getElementById("selectList");
  var selectedValue = selectList.value;
  console.log(selectedValue);
  toggleSelectList();
}

CSSスタイル

select {
  display: none; /* 隐藏下拉框 */
  width: 100%;
  padding: .5rem;
  font-size: 1rem;
  border: none;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

概要

合格JavaScript はドロップダウン ボックスを実装しており、これによりページの操作がよりフレンドリーで便利になります。この記事を読むと、JavaScript でドロップダウン ボックスを実装する原理は非常に単純であることがわかります。

<select> タグの属性値を取得することで、値を取得できます。ドロップダウンボックスの表示と非表示を切り替えるにはJavaScriptが必要です。

以上がJavaScript を使用してドロップダウン ボックス機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。