html,jquery写一个i文本框,可以传入多个值到另一个文本框,在该文本框可以点击x图标,x掉选中的项
时间: 2024-05-16 22:12:14 浏览: 8
以下是一个示例代码,可以实现您的需求:
```html
<!DOCTYPE html>
<html>
<head>
<title>传值示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.selected-items {
margin-top: 10px;
padding: 5px;
border: 1px solid gray;
}
.selected-items i {
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" id="source" placeholder="请输入要传递的值,多个值用逗号分隔">
<button id="submit">传值</button>
<div id="selected-items" class="selected-items"></div>
<script>
$(function() {
$('#submit').click(function(e) {
e.preventDefault();
var values = $('#source').val().split(',');
var items = '';
for (var i = 0; i < values.length; i++) {
items += '<span>' + values[i] + ' <i class="fa fa-close"></i></span> ';
}
$('#selected-items').append(items);
$('#source').val('');
});
$(document).on('click', '#selected-items i', function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>
```
解释一下代码:
1. 我们使用了 jQuery 库来简化 JavaScript 的操作。
2. 在页面中添加了一个输入框和一个按钮,用户输入要传到另一个文本框的值,并点击按钮传值。
3. 用户选择的值会在页面中另一个区域展示出来,每个值会显示为一个带有关闭图标的标签。
4. 用户可以点击这个标签上的关闭图标来删除该项。
希望这段代码可以帮助到您!
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)