今天研究了下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> <!--区、市--> <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>
相关推荐
原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...
一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
类似百度下拉提示 模拟select下拉框 jquery插件 自动提示框 下拉框 本插件依赖于jquery的插件,类似于百度下拉提示框
jQuery模拟select下拉框插件是一款支持多选和单选下拉框菜单选中代码。
jQuery模拟select下拉框插件是一款支持多选和单选下拉框菜单选中代码。
jQuery模拟select下拉框三级城市联动代码.zip
jquery DIV模拟select,样式美观、大方、可自己更换背景、不懂的私我
用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip 用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip 用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip
一款美化得很好看的jQuery模拟select下拉框多选和单选插件,以下拉形式展示,非常的有特色。
原生js text文本框模拟select下拉框美化点击下拉菜单选择value赋值效果源码.zip
完美的select模拟组件,不会影响屏蔽Js的用户的浏览,兼容性好,可以通过传递参数设置select的外观,炫丽效果,一个参数搞定,并且能完整保留原生select的绑定事件
JS模拟select下拉菜单
DIV模拟select框,自动生成div框
selectBox下拉框模拟,有多种样式,可以自己定义修改样式