Comment utiliser JavaScript pour implémenter la fonctionnalité de liste déroulante-Questions et réponses frontales-php.cn

Comment utiliser JavaScript pour implémenter la fonctionnalité de liste déroulante

PHPz

Libérer： 2023-04-24 11:42:37

original

4400 Les gens l'ont consulté

Avant-propos

La zone déroulante d'un formulaire est un composant interactif couramment utilisé, qui peut aider les utilisateurs à sélectionner les options requises plus rapidement et plus facilement. Cet article montrera comment utiliser JavaScript pour implémenter la fonctionnalité de liste déroulante.

Structure HTML

Nous devons d'abord créer une structure HTML, comprenant une balise <select> et plusieurs balises <option>. La balise <select> représente le conteneur de la liste déroulante et la balise <option> représente les options de la boîte déroulante. Balise ;option> L'attribut value représente la valeur de l'option, et le contenu de la balise <option> représente le nom de l'option. <select>标签和多个<option>标签。<select>标签表示下拉框容器，<option>标签表示下拉框中的选项，每一个<option>标签的value属性表示选项的值，<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>

Copier après la connexion

JavaScript实现

在JavaScript中，通过获取<select>标签的value属性，可以获取当前选中的选项的值。而通过获取<select>标签的selectedIndex属性，则可以获取当前选中的选项的索引。

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

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

Copier après la connexion

为了让下拉框具有更好的体验，我们需要借助JavaScript实现下拉框的可选状态切换功能。可以通过给<select>标签添加onclick事件，设置<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;
  }
}

Copier après la connexion

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;
}

Copier après la connexion

绑定事件

最后，我们需要将上述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>

Copier après la connexion

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

Copier après la connexion

完整代码

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>

Copier après la connexion

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();
}

Copier après la connexion

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;
}

Copier après la connexion

总结

通过JavaScript实现下拉框，可以让页面的交互更加友好和便捷。通过这篇文章的学习，不难发现，JavaScript实现下拉框的原理十分简单，通过获取<select>rrreee

Implémentation JavaScript🎜🎜En JavaScript, vous pouvez obtenir la valeur de l'option actuellement sélectionnée en obtenant l'attribut value de la balise <select>. En obtenant l'attribut selectedIndex de la balise <select>, vous pouvez obtenir l'index de l'option actuellement sélectionnée. 🎜rrreee🎜Afin de donner à la liste déroulante une meilleure expérience, nous devons utiliser JavaScript pour implémenter la fonction facultative de changement d'état de la liste déroulante. Vous pouvez simuler une liste déroulante en ajoutant un événement onclick à la balise <select>, en définissant l'attribut size de la balise <select> sur une valeur appropriée. et afficher toutes les options. Dans le même temps, vous pouvez utiliser des styles CSS pour embellir le style de la liste déroulante. 🎜rrreeerrreee🎜Événements de liaison🎜🎜Enfin, nous devons lier le code JavaScript ci-dessus avec des structures et des événements HTML. Ici, nous utilisons l'événement onchange sur la balise HTML et la fonction personnalisée toggleSelectList pour afficher et masquer la liste déroulante. 🎜rrreeerrreee🎜Code complet🎜🎜Structure HTML🎜rrreee🎜Implémentation JavaScript🎜rrreee🎜Style CSS🎜rrreee🎜Résumé🎜🎜 La mise en œuvre de listes déroulantes via JavaScript peut rendre l'interaction avec la page plus conviviale et plus pratique. Après avoir étudié cet article, il n'est pas difficile de constater que le principe d'implémentation d'une liste déroulante en JavaScript est très simple. En obtenant la valeur de l'attribut de la balise <select>, vous pouvez obtenir. la valeur de la liste déroulante et changez l'état sélectionné, en même temps, JavaScript est requis pour apparaître et masquer la liste déroulante. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!