jquery添加项目以选择输入

📌 相关文章

📜 jquery添加项目以选择输入 - Javascript(1)

📅 最后修改于: 2023-12-03 15:32:15.112000 🧑 作者: Mango

本文介绍如何使用jQuery添加一个可选择的输入框，以便用户可以从一个下拉菜单中选择一个项目并将其添加到输入框中。

HTML代码

首先，我们需要创建一个包含下拉菜单和输入框的HTML代码。我们为下拉菜单添加了一些选项，以演示如何将项目添加到输入框中。

<label for="items">选择项目：</label>
<select id="items">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>
<br>
<label for="chosen">已选项目：</label>
<input type="text" id="chosen">

使用jQuery添加事件监听器

我们将使用jQuery添加事件监听器，以便当用户从下拉菜单中选择一个项目时，在输入框中添加该项目。

$(function() {
  $('#items').change(function() {
    var selected = $(this).children('option:selected').val();
    var currentVal = $('#chosen').val();
    if (currentVal == '') {
      $('#chosen').val(selected);
    } else {
      $('#chosen').val(currentVal + ', ' + selected);
    }
  });
});

```markdown
解释:
- `$(function() {...})`将代码包装在一个jQuery文档准备就绪函数中，以确保在文档加载完成后再运行代码。
- `$('#items').change(function() {...})`添加事件监听器，每当下拉菜单的值更改时就会触发该函数。
- `var selected = $(this).children('option:selected').val();`获取当前选择项的值。
- `var currentVal = $('#chosen').val();`获取输入框的当前值。
- `if (currentVal == '') {...}`检查输入框是否为空。如果为空，则将选择的项目设置为输入框的值。
- `else {...}`如果输入框不为空，则将选择的项目添加到当前值的末尾。

## 完整的HTML代码

```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery添加项目以选择输入</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function() {
    $('#items').change(function() {
      var selected = $(this).children('option:selected').val();
      var currentVal = $('#chosen').val();
      if (currentVal == '') {
        $('#chosen').val(selected);
      } else {
        $('#chosen').val(currentVal + ', ' + selected);
      }
    });
  });
</script>
</head>
<body>
<label for="items">选择项目：</label>
<select id="items">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>
<br>
<label for="chosen">已选项目：</label>
<input type="text" id="chosen">
</body>
</html>

Markdown格式如下:

jQuery添加项目以选择输入

本文介绍如何使用jQuery添加一个可选择的输入框，以便用户可以从一个下拉菜单中选择一个项目并将其添加到输入框中。

HTML代码

首先，我们需要创建一个包含下拉菜单和输入框的HTML代码。我们为下拉菜单添加了一些选项，以演示如何将项目添加到输入框中。

<label for="items">选择项目：</label>
<select id="items">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>
<br>
<label for="chosen">已选项目：</label>
<input type="text" id="chosen">

使用jQuery添加事件监听器

我们将使用jQuery添加事件监听器，以便当用户从下拉菜单中选择一个项目时，在输入框中添加该项目。

$(function() {
  $('#items').change(function() {
    var selected = $(this).children('option:selected').val();
    var currentVal = $('#chosen').val();
    if (currentVal == '') {
      $('#chosen').val(selected);
    } else {
      $('#chosen').val(currentVal + ', ' + selected);
    }
  });
});

解释:

$(function() {...})将代码包装在一个jQuery文档准备就绪函数中，以确保在文档加载完成后再运行代码。
$('#items').change(function() {...})添加事件监听器，每当下拉菜单的值更改时就会触发该函数。
var selected = $(this).children('option:selected').val();获取当前选择项的值。
var currentVal = $('#chosen').val();获取输入框的当前值。
if (currentVal == '') {...}检查输入框是否为空。如果为空，则将选择的项目设置为输入框的值。
else {...}如果输入框不为空，则将选择的项目添加到当前值的末尾。

完整的HTML代码

<!DOCTYPE html>
<html>
<head>
  <title>jQuery添加项目以选择输入</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('#items').change(function() {
        var selected = $(this).children('option:selected').val();
        var currentVal = $('#chosen').val();
        if (currentVal == '') {
          $('#chosen').val(selected);
        } else {
          $('#chosen').val(currentVal + ', ' + selected);
        }
      });
    });
  </script>
</head>
<body>
  <label for="items">选择项目：</label>
  <select id="items">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </select>
  <br>
  <label for="chosen">已选项目：</label>
  <input type="text" id="chosen">
</body>
</html>