基于jQuery实现select下拉选择可输入附源码下载

为了实现“基于jQuery实现select下拉选择可输入”，需要在HTML页面中增加以下代码结构：

<label for="select-input">下拉选择可输入：</label>
<select id="select-input" name="select-input">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
  <option value="5">选项5</option>
</select>

其中，select标签定义了下拉列表，包含了多个option标签，每个option标签又定义了列表中的选项。通过label标签，我们为这个下拉列表添加了一个文字标签，方便用户使用。

接下来，我们需要使用jQuery来实现下拉选择可输入的效果。首先需要在页面底部引入jQuery库的代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后，我们可以在JavaScript中编写以下代码，实现下拉选择可输入的效果：

$(document).ready(function() {
  // 拷贝 option 元素，并置空值属性
  $('#select-input option').clone().val('').appendTo('#select-input');

  // 监听 select 元素的 change 事件
  $('#select-input').on('change', function() {
    var selected = $(this).find('option:selected');
    var input = $('<input type="text" class="select-input" />');

    // 将用户输入的值保存到 option 的 value 属性中
    input.val(selected.text());
    selected.val(selected.text());

    // 替换原有的 option 元素为 input 元素
    selected.replaceWith(input);

    // 监听 input 元素的 blur 事件
    input.on('blur', function() {
      var value = $(this).val();
      if (value.length === 0) {
        // 如果用户清空了 input 元素，则替换为原先的 option 元素
        selected = $(this).replaceWith(selected);
        selected.val(selected.text());
      }
      else {
        // 否则，更新 option 的 text 和 value 属性
        selected.text(value).val(value);
      }
    });
  });
});

这段代码实现了如下的功能：

将原有的所有option元素进行拷贝，并把拷贝出来的新元素的value属性置为空，插入到select元素的最后面。
监听select元素的change事件，一旦选择了任意一个option元素，就创建一个新的input元素，并将用户选择的文本内容插入到该input元素中，同时将该option元素替换为新创建的input元素。
监听新创建的input元素的blur事件，一旦用户离开该元素，就检查用户是否输入了任意内容。如果输入了内容，则将该option元素的text属性和value属性都更新为用户输入的内容。如果没有输入任何内容，则将该input元素替换为原来的option元素，并将该option元素的value属性设置为其text属性。

经过以上步骤，我们成功地实现了下拉选择可输入的效果。为了方便大家使用，我们还可以将上述代码放到一个.js文件中，方便用户引用。例如，我们将以上代码保存为名为select-input.js的文件，放到js文件夹中。那么在页面中，我们只需调用以下代码，即可引用此文件：

<script src="js/select-input.js"></script>

示例1：基本样式实现

我们在页面中添加以下代码，即可展示出基础的下拉选择可输入内容。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>下拉框可输入</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="js/select-input.js"></script>
</head>
<body>
  <h1>下拉框可输入</h1>
  <label for="select-input">下拉选择可输入：</label>
  <select id="select-input" name="select-input">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
  </select>
</body>
</html>

示例2：样式优化

以上展示出来的下拉选择可输入的样式非常简单，为了可以有更好的用户体验，我们可以自定义样式。我们在demo中增加以下代码，即可将原有的下拉框样式修改为更加简洁美观的方式。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>下拉框可输入</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="js/select-input.js"></script>
  <style>
    label { display: block; font-size: 18px; margin-bottom: 10px; }
    .select-input { border: none; background: none; color: #333; font-size: 16px; }
    .select-input:focus { outline: none; }
  </style>
</head>
<body>
  <h1>下拉框可输入</h1>
  <label for="select-input">下拉选择可输入：</label>
  <select id="select-input" name="select-input" style="display: none;">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
  </select>
</body>
</html>

其中，我们利用了CSS对样式进行自定义，将表单的样式修改为更加美丽的类型。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jQuery实现select下拉选择可输入附源码下载 - Python技术站

基于jQuery实现select下拉选择可输入附源码下载

相关文章