聯系官方銷售客服
1835022288
028-61286886
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>下拉框內容過濾的js實現</title>
<style type="text/css">
.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;" onchange="selectOnchange()" >
<option value="1">北京</option>
<option value="1">上海</option>
<option value="1">廣州</option>
<option value="1">深圳</option>
<option value="1">杭州</option>
<option value="1">南京</option>
<option value="1">武漢</option>
<option value="1">成都</option>
<option value="1">長沙</option>
<option value="1">南昌</option>
</select>
<!-- 過濾 -->
<input type="text" value="輸入過濾" id ="filter"
class="select-filter input_init"
style="width: 80px ;"
onclick="selectOnclick(this)"
onblur="selectOnblur(this)"
onmouseout="targetChangeFunction(this)"
onkeyup="selectOnkeyup(this)" />
</div>
<script type="text/javascript">
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>