select下拉框模拟

模拟Select下拉框实现多级联动与搜索功能

最新推荐文章于 2021-10-14 11:57:46 发布

原创最新推荐文章于 2021-10-14 11:57:46 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select框模拟 #select手动输入 #搜索select框 #二级联动

JS 专栏收录该内容

58 篇文章

订阅专栏

今天研究了下select下拉框的模拟，这里记录一下。

实现的效果：

1、模拟select下拉框；

2、能够手动输入；

3、简单搜索（在文本框中输入关键字，自动从下拉选中搜索）；

4、简单二级联动

1、页面布局：

<body>
<!--省市-->
<span class="sele2" onclick="showselect(1);">
<input type="text" class="txta" id="selectValue_1" onkeyup="likeQuery(this,1);"/>
<ul style="display: none" id="seleUL_1" class="seleUL" order="1">
</ul>
</span>
&nbsp;&nbsp;&nbsp;
<!--区、市-->
<span class="sele2" onclick="showselect(2);">
<input type="text" class="txta" id="selectValue_2" value="" onkeyup="likeQuery(this,2);"/>
<ul style="display: none" id="seleUL_2" class="seleUL" order="2">
</ul>
</span>
</body>

2、CSS样式：

<style type="text/css">
.sele2 { width: 100px; border:1px solid #ccc; height:20px; background:url(redLine_bg.gif) no-repeat right 2px #fff; display:inline-block; height:28px; line-height:28px; position:relative; cursor:pointer; text-align:left;font-size:12px; }
.divText { }
.seleUL { position:absolute; background:#fff; width:100px;   border:1px solid #ccc; top:28px; border-top:0px; left:-41px; }
.seleUL li {  height:28px; line-height:32px; text-align:left;font-size:12px; margin-top:2px; }
.liHover{ background:#e2e2e2; color:#666; text-align:left;font-size:12px; }
.curLi { background:#ccc; color:#666; text-align:left;font-size:12px; }
.txta { width:77%; height:26px; border:1px solid #dcdcdc; display:block; float:left; line-height:26px;  font-size:12px;text-align:left; }
</style>

3、用到的JSON串：

/*
var provinceList = {
"province":{"北京","天津","上海","重庆","河北","河南","湖北","湖南","山东","山西"},
"city":
[
{"北京":{"朝阳","海淀","东城","西城"}},
"天津":{"和平","河西","河东","南开"},
"上海":{"杨浦","黄埔","宝山","青浦"},
"重庆":{"万州","涪陵","渝中","大渡口"},
"河北":{"石家庄","邯郸","保定","沧州"},
"河南":{"郑州","开封","洛阳","南阳"},
"湖北":{"武汉","黄石","十堰","襄阳"},
"湖南":{"长沙","岳阳","娄底","怀化"},
"山东":{"济南","济宁","淄博","德州"},
"山西":{"太原","大同","朔州","阳泉"},
]
}
*/
var provinceList = {
"province":[
{"name":"北京"},
{"name":"天津"},
{"name":"上海"},
{"name":"重庆"},
{"name":"河北"},
{"name":"河南"},
{"name":"湖北"},
{"name":"湖南"},
{"name":"山东"},
{"name":"山西"}
],
"city":[
{"province":"北京","city":"朝阳"},
{"province":"北京","city":"海淀"},
{"province":"北京","city":"东城"},
{"province":"北京","city":"西城"},

{"province":"天津","city":"和平"},
{"province":"天津","city":"河西"},
{"province":"天津","city":"河东"},
{"province":"天津","city":"南开"},

{"province":"上海","city":"杨浦"},
{"province":"上海","city":"黄埔"},
{"province":"上海","city":"宝山"},
{"province":"上海","city":"青浦"},

{"province":"重庆","city":"万州"},
{"province":"重庆","city":"涪陵"},
{"province":"重庆","city":"渝中"},
{"province":"重庆","city":"大渡口"},

{"province":"河北","city":"石家庄"},
{"province":"河北","city":"邯郸"},
{"province":"河北","city":"保定"},
{"province":"河北","city":"沧州"},

{"province":"河南","city":"郑州"},
{"province":"河南","city":"开封"},
{"province":"河南","city":"洛阳"},
{"province":"河南","city":"南阳"},

{"province":"湖北","city":"武汉"},
{"province":"湖北","city":"黄石"},
{"province":"湖北","city":"十堰"},
{"province":"湖北","city":"襄阳"},

{"province":"湖南","city":"长沙"},
{"province":"湖南","city":"岳阳"},
{"province":"湖南","city":"娄底"},
{"province":"湖南","city":"张家界"},

{"province":"山东","city":"济南"},
{"province":"山东","city":"济宁"},
{"province":"山东","city":"德州"},
{"province":"山东","city":"淄博"},

{"province":"山西","city":"太原"},
{"province":"山西","city":"大同"},
{"province":"山西","city":"朔州"},
{"province":"山西","city":"阳泉"}
]
}

4、用到的JS：

<script type="text/javascript">
$(function(){
var provinces = provinceList.province;//从JSON串中获取省份集合
var liStr="";
for(var i=0;i<provinces.length;i++){//遍历集合
	liStr+="<li>"+provinces[i].name+"</li>";//拼接LI的HTML
}
$("#seleUL_1").html(liStr);

//seleUL li鼠标经过事件:live方法适用于动态生成的Jquery对象
$(".seleUL>li").live("hover",function(){
	$(this).siblings().removeClass("liHover");
	$(this).addClass("liHover");
},function(){
	$(this).removeClass("liHover");
});

//seleUL li鼠标点击事件
$(".seleUL>li").live("click",function(){
        //1、获取值
	var liText = jQuery.trim($(this).text());
	//2、添加样式并去除其他li的样式
	$(this).siblings().removeClass("curLi");//去除样式
	$(this).addClass("curLi");//添加样式
	//3、给input框赋值
	$(this).parent().prev("input.txta").val(liText);

	//4、根据li的值查询JSON串拼接liStr到第二个UL中
	var order = $(this).parent("ul").attr("order");
	order = parseInt(order);
	if(order==1){//一级有联动，二级没有
		var cities = provinceList.city;//获取城市集合
		//alert(cities.length);
		var liStr2="";
		for(var j=0;j<cities.length;j++){
			var province=cities[j].province;//获取当前市所处省份，判断是不是选定的省份
			if(province==liText){
				liStr2+="<li>"+cities[j].city+"</li>";
			}
		}
		//alert(liStr2);
		$("#seleUL_2").html(liStr2);
	}
});

});

/**
*点击div时下面的下拉框显示或隐藏
*/
function showselect(order){
	var $UL = $("#seleUL_"+order);//UL
	if($UL.is(":visible")){//处于显示状态
		$UL.hide();//隐藏
	}else{
		$UL.show();//显示
		showOrHide($UL);//添加效果：停留在其上时显示，离开时隐藏
	}
}
/**
*鼠标进入与离开事件
*/
function showOrHide(obj){
	$(obj).mouseenter(function(){
	}).mouseleave(function(){
		$(obj).hide();
	});
}

/**
*文本框中的值发生变化时，根据输入的值搜索LI中的内容
*/
function likeQuery(obj,order){
var inputVal = jQuery.trim($(obj).val());
//让所有的li隐藏 
$("#seleUL_"+order+">li").hide();
$("#seleUL_"+order+">li").filter(":contains('"+(inputVal)+"')").show();//符合条件的li显示
$("#seleUL_"+order).show();//UL显示
}
</script>