今天研究了下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>
相关推荐
"DIV模拟select下拉框"就是一种利用JavaScript库，如jQuery，来实现这一目标的技术。它通过用CSS样式化的DIV元素替换原生的SELECT元素，从而提供更灵活的外观和交互体验。 标题中的"DIV模拟select下拉框"意味着我们...
`jQuery select下拉框美化代码`这个压缩包的实现可能还包含了其他细节，如防止多次点击导致的闪烁，以及在鼠标移出下拉框时自动隐藏内容等功能。这种美化代码对于提升网站的用户体验和专业感具有积极意义，特别是...
原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...
本示例关注的是如何在Freemarker（FTL）中创建一个通用的`select`下拉框，以满足各种Web界面中的下拉选择需求。通过单元测试确保其灵活性和可复用性。 首先，理解`select`下拉框在HTML中的基本结构，它由`<select>`...
jQuery模拟select下拉框插件就是为了克服这些局限性。它通常会用一个`<div>`或其他HTML元素来模拟下拉框，并结合JavaScript和CSS实现动态效果和定制样式。这种插件可以提供更多的定制选项，如分组、搜索、过滤、无限...
"jQuery模拟select下拉框插件"就是这样一个工具，它提供了更丰富的交互性和定制性，相比原生的HTML下拉框控件，能够为用户带来更好的体验。下面将详细探讨这个插件的原理、功能以及如何使用。 首先，原生的`<select...
**JS模拟Select下拉框组件详解** 在网页开发中，Select元素是常用的数据选择控件，但其样式和交互方式往往不能满足设计师和开发者对于用户体验的高要求。为了解决这个问题，开发人员通常会使用JavaScript来模拟...
在"select下拉框可编辑输入框"的设计中，CSS起到了至关重要的作用，主要体现在以下几个方面： 1. **样式定制**：通过CSS，我们可以定制下拉框的外观，如边框、背景色、字体样式等，使其与网页的整体设计风格保持...
这种技术主要应用于表单元素，尤其是模拟传统的`<select>`下拉框，但提供了更为丰富的交互性和自定义性。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个插件中...
`jQuery手机下拉框select` 主要关注于改善移动端的用户体验，通过JavaScript和CSS增强下拉框的外观和功能。 ### jQuery Mobile Select Menu jQuery Mobile 提供了一个专门的 Select Menu 插件，用于将标准的...
**jQuery select下拉框单选和多选插件** 在Web开发中，下拉框（select）是常用的一种用户交互元素，它用于提供多个选项供用户选择。然而，原生的HTML select元素在样式和交互性上往往显得较为单一。为了解决这个...
然而，原生的select下拉框在样式定制和交互性方面存在局限，因此开发者常常使用jQuery来模拟自定义的下拉框，以便获得更好的用户体验和设计自由度。 这个项目的核心在于实现城市联动功能。当用户在第一级（省份）中...
一种常见的解决方案是使用JavaScript库（如jQuery）和自定义的HTML/CSS结构来模拟`select`下拉框，这样可以实现更丰富的自定义效果。 以下是一个简单的自定义下拉框样式的步骤： 1. **HTML结构**：创建一个包含`...
用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip 用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip 用JS模拟来select下拉框控件的特效 可用作下拉菜单来用.zip
`jQuery Select下拉框美化代码`就是一个专门解决这一问题的实例，它采用绿色清新风格，并添加了滚动条效果，使得原本单调的下拉框变得更具吸引力。 首先，我们需要了解jQuery库。jQuery是一个广泛使用的JavaScript...
本话题聚焦于一个基于jQuery的特定插件，用于模拟select下拉框的多选和单选功能，并且具有美观的界面设计。 这个插件主要针对传统的HTML `<select>` 元素进行增强，提供了更加友好的用户体验和视觉效果。在网页开发...