正文

如何用jQuery实现既支持选择又可自由输入的下拉列表？

/0 浏览量
0629

在网页设计中，下拉列表（也称为下拉菜单）是一种常见的界面元素，用于展示一个选项列表，用户可以通过点击下拉箭头来展开或收起选项。然而，有时我们需要一个下拉列表，它不仅允许用户从预定义的选项中选择，还允许用户输入自定义的值。下面，我将详细讲解如何使用jQuery来实现这样一个功能。

基本HTML结构

首先，我们需要一个基本的HTML结构来创建下拉列表。这里有一个简单的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义下拉列表</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<input type="text" id="customInput" placeholder="输入自定义值" style="display:none;"/>

<script src="script.js"></script>
</body>
</html>

在这个例子中，我们有一个<select>元素和一个隐藏的<input type="text">元素。<select>元素包含了几个预定义的选项。

CSS样式

接下来，我们需要一些CSS样式来控制下拉列表和输入框的显示：

/* styles.css */
#mySelect {
  width: 200px;
  height: 30px;
}

#customInput {
  width: 200px;
  height: 30px;
  margin-top: 5px;
}

jQuery脚本

现在，我们来编写jQuery脚本，使下拉列表支持自定义输入：

// script.js
$(document).ready(function() {
  $('#mySelect').on('change', function() {
    if ($(this).val() === 'custom') {
      $('#customInput').show();
    } else {
      $('#customInput').hide();
    }
  });

  $('#customInput').on('input', function() {
    if ($(this).val() !== '') {
      $('#mySelect').append($('<option>', {
        value: $(this).val(),
        text: $(this).val()
      }));
      $('#mySelect').val('');
      $('#customInput').hide();
    }
  });
});

解释

  1. 当用户从下拉列表中选择一个选项时，如果选择的是custom，则显示输入框。
  2. 当用户在输入框中输入文本并按下回车键时，该文本将被添加到下拉列表中，然后输入框会隐藏。
  3. 如果用户输入的值已经被下拉列表中的某个选项所包含，则不会重复添加。

这样，我们就实现了一个既支持选择又可自由输入的下拉列表。用户可以从预定义的选项中选择，也可以输入自定义的值。

-- 展开阅读全文 --