jquery如何实现根据输入内容过滤选项的下拉框
时间: 2024-05-15 19:16:57 浏览: 7
一种实现方式是使用jQuery的keyup事件和filter方法。具体步骤如下:
1. 给下拉框添加keyup事件监听:
```
$("#selectBox").on("keyup", function() {
// 过滤选项
});
```
2. 获取输入框中的内容:
```
var inputVal = $(this).val();
```
3. 使用filter方法过滤选项,将不符合条件的选项隐藏:
```
$("#selectBox option").filter(function() {
return $(this).text().indexOf(inputVal) === -1;
}).hide();
```
4. 显示符合条件的选项:
```
$("#selectBox option").filter(function() {
return $(this).text().indexOf(inputVal) !== -1;
}).show();
```
完整代码示例:
HTML:
```
<select id="selectBox">
<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>
```
JS:
```
$("#selectBox").on("keyup", function() {
var inputVal = $(this).val();
$("#selectBox option").filter(function() {
return $(this).text().indexOf(inputVal) === -1;
}).hide();
$("#selectBox option").filter(function() {
return $(this).text().indexOf(inputVal) !== -1;
}).show();
});
```