jquery实现多选,并且在input框中展示多选项
时间: 2024-03-19 21:44:49 浏览: 128
基于jquery实现的多选下拉框
5星 · 资源好评率100%
可以使用jQuery插件"Select2"来实现多选功能,并在input框中展示多选项。首先需要在HTML中引入jQuery和Select2的js和css文件,然后在相应的select标签上添加multiple属性和class为"js-example-basic-multiple",在相应的input标签上添加id属性即可实现多选功能并在input框中展示多选项。具体使用方法可以参考Select2的官方文档。以下是一个简单的示例代码:
HTML代码:
```
<select class="js-example-basic-multiple" multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input type="text" id="selected-values" />
```
JavaScript代码:
```
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
$('.js-example-basic-multiple').on('change', function() {
var selectedValues = $(this).val();
$('#selected-values').val(selectedValues);
});
});
```
在这个示例代码中,我们通过on函数监听select的change事件,当select的值发生变化时,就将选中的值赋值给input框。
阅读全文