html选择框加模糊查找,input selec下拉框模糊查询
时间: 2023-10-26 20:28:43 浏览: 39
要实现下拉框的模糊查询,可以使用JavaScript来动态过滤下拉框选项。具体实现方式如下:
1. 给下拉框添加一个输入框,用于输入要查询的关键字。
2. 监听这个输入框的change事件,每次输入内容发生变化时,都要重新过滤下拉框选项。
3. 获取下拉框的所有选项,遍历每个选项,判断选项的文本内容是否包含输入框中的关键字,如果包含,则显示该选项,否则隐藏该选项。
以下是一个简单的例子,实现了一个带有输入框的下拉框,可以通过输入框中的关键字来过滤下拉框选项:
HTML代码:
```html
<label for="select">下拉框:</label>
<input type="text" id="select-filter">
<select id="select">
<option value="1">苹果</option>
<option value="2">香蕉</option>
<option value="3">橙子</option>
<option value="4">西瓜</option>
<option value="5">葡萄</option>
</select>
```
JavaScript代码:
```javascript
var select = document.getElementById('select');
var selectFilter = document.getElementById('select-filter');
// 监听输入框变化事件
selectFilter.addEventListener('change', function() {
// 获取输入框中的关键字
var keyword = selectFilter.value.toLowerCase();
// 遍历下拉框的选项,过滤掉不符合条件的选项
for (var i = 0; i < select.options.length; i++) {
var option = select.options[i];
var text = option.text.toLowerCase();
if (text.indexOf(keyword) >= 0) {
option.style.display = '';
} else {
option.style.display = 'none';
}
}
});
```
这样就可以实现一个简单的下拉框模糊查询功能了。