select下拉框实现过滤

(´°̥̥̥̥l·^┭.o＆p"m"｡)

已于 2024-07-08 18:33:32 修改

阅读量694

点赞数 6

文章标签：前端 html5

于 2024-03-20 11:05:27 首次发布

本文链接：https://blog.csdn.net/qq_64402168/article/details/136870306

版权

本文详细介绍了如何使用JavaScript为下拉列表实现动态内容过滤功能，包括onchange事件触发、输入框的点击、模糊匹配以及解决不同浏览器兼容性问题。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>下拉框内容过滤的js实现</title>

.select-filter {

margin: 4px 4px;

border:1px dashed #CCCCCC;

background-color: #F0F0F0;

font-size: 14px;

}

.input_init {

color: gray;

font-style: italic;

}

</style>

</head>

<body>

<div>

请选择城市：<select name="city" style="width: 80px;" οnchange="selectOnchange()" >

</select>

<input type="text" value="输入过滤" id ="filter"

class="select-filter input_init"

style="width: 80px ;"

οnclick="selectOnclick(this)"

οnblur="selectOnblur(this)"

οnmοuseοut="targetChangeFunction(this)"

οnkeyup="selectOnkeyup(this)" />

</div>

function selectOnchange(){

// alert("下拉内容改变了")

// targetChangeFunction(obj)

}

/** 输入过滤的4个事件 */

function selectOnclick(obj){

if(obj.value == "输入过滤") {

obj.value="";

}

function selectOnblur(obj){

if (obj.value.trim() == "") {

obj.value="输入过滤";

}

function selectOnkeyup(obj){

// 获取过滤框的父级标签的第一个select子标签

var select = obj.parentNode.getElementsByTagName("select")[0];

// 获取过滤框的值，并全部转换成大写

var filterValue = obj.value.trim().toUpperCase();

// 将过滤框的值转换成小写

var filterValueToLowerCase = obj.value.trim().toLowerCase();

// for循环上面获取的select标签的option

for (var i=0; i < select.options.length; i++) {

// 如果过滤框的值得大写形式和小写形式都不被option的值包含的话；把这个option隐藏

if (select.options[i].text.indexOf(filterValue) < 0 && select.options[i].text.indexOf(filterValueToLowerCase) < 0) {

select.options[i].style.display = "none";

} else{

// 否则把option 显示

select.options[i].style.display = "block";

}

// for循环上面处理过后的option

for (var i=0; i < select.options.length; i++) {

if (select.options[i].style.display == "block") {

// 选中所有option的样式是显示的第一个option

select.options[i].selected="selected";

// 跳出循环

break;

} else {

// 这里要解决火狐浏览器的bug。防止当当输入过滤都不符合的时候，火狐的下拉框为空

if(i == select.options.length-1){

// 这里当不满足过滤条件时，让他默认选择所有下拉的第一个

select.options[0].style.display = "block";

select.options[0].selected="selected";

}

return; // 结束

}

/* 作用：主动触发change事件,这个事件根据业务场景来使用 */

function targetChangeFunction(obj){

/* 这里用js来主动触发change事件 */

// 获取过滤框的父级标签的第一个select子标签

var select = obj.parentNode.getElementsByTagName("select")[0];

// 创建事件对象

var eventObj = document.createEvent('HTMLEvents');

// 初始化事件

eventObj.initEvent("change",true,true) ;

// 触发事件

select.dispatchEvent(eventObj);

}

</script>

</body>

</html>

(´°̥̥̥̥l·^┭.o＆p"m"｡)

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
select下拉框实现过滤

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8
复制链接

扫一扫