How to use JavaScript to implement drop-down box functionality

Preface

The drop-down box in the form is a commonly used interactive component, which can help users select the required options more quickly and conveniently. This article will demonstrate how to use JavaScript to implement drop-down box functionality.

HTML structure

We first need to create an HTML structure, including a <select> tag and multiple <option> tags. The <select> label represents the drop-down box container, the <option> label represents the options in the drop-down box, and the value attribute of each <option> label Represents the value of the option, and the content of the <option> tag represents the name of the 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 implementation

In JavaScript, you can get the value of the currently selected option by getting the value attribute of the <select> tag. By getting the selectedIndex attribute of the <select> tag, you can get the index of the currently selected option.

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

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

In order to give the drop-down box a better experience, we need to use JavaScript to implement the optional state switching function of the drop-down box. You can simulate a drop-down box by adding an onclick event to the <select> tag, setting the size attribute of the <select> tag to an appropriate value and displaying all options. At the same time, you can use CSS styles to beautify the style of the drop-down box.

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

Binding events

Finally, we need to bind the above JavaScript code with HTML structures and events. Here, we use the onchange event on the HTML tag and the custom toggleSelectList function to pop up and hide the drop-down box list.

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

Complete code

HTML structure

<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 implementation

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 style

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

Summary

Passed JavaScript implements drop-down boxes, which can make page interaction more friendly and convenient. Through studying this article, it is not difficult to find that the principle of implementing drop-down boxes in JavaScript is very simple. By obtaining the attribute value of the <select> tag, you can obtain the value of the drop-down box and switch the selected state. At the same time, JavaScript is required to pop up and hide the drop-down box list.

The above is the detailed content of How to use JavaScript to implement drop-down box functionality. For more information, please follow other related articles on the PHP Chinese website!