您的位置:首页 > Web前端 > JavaScript

纯原生javascript下拉框表单美化实例教程

2021-01-18 21:24 1081 查看

html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道。但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如下拉框。

本实例通过创建div和li等元素来生成一个模拟下拉框,以达到美化下拉框的效果。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。

先创建一个select元素,作为美化下拉框的数据来源,如下所示:

<div class="select_wrap" id="selectWrap">
<dl>
<dt>请选择:</dt>
<dd>
<select id="selectElem">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广东</option>
<option value="4">湖南</option>
<option value="5">河北</option>
<option value="6">黑龙江</option>
</select>
</dd>
</dl>
</div>

 

既然是做一个下拉框美化的效果,那肯定是需要用一些css样式来实现。读者可以根据自己有喜好编写,也可以直接复制以下代码:

.select_wrap{
width:800px;
margin:30px auto;
}
.select_wrap dt{
float:left;
width:120px;
line-height:36px;
text-align:right;
font-size:14px;
}
.select_wrap dd{
margin-left:130px;
line-height:36px;
}
.select_wrap input[type=text],.select_wrap input[type=password]{
height:24px;
line-height:22px;
padding:0 5px;
border:1px solid #aaa;
border-radius:2px;
}
.select_wrap .btn{
padding:0 20px;
color:#fff;
cursor:pointer;
line-height:30px;
border:none;
margin-right:20px;
background:#108ee9;
}
.select_container{
position:relative;
display:inline-block;
}
.input_container:{
position:relative;
}
.input_container::after{
content:"";
position:absolute;<
ad8
span style="color: rgba(255, 0, 0, 1)">
top:15px;
right:8px;
display:inline-block;
height:0px;
border:6px solid transparent;
border-top-color:#ccc;
pointer-events:none;
}
.input_container input{
height:30px;
line-height:28px;
padding:0 5px;
border:1px solid #aaa;
border-radius:4px;
}
.input_container input:focus{
border-color:#129cff;
outline:none;
box-shadow:0 0 6px #65bfff;
}
.select_container ul{
position:absolute;
top:35px;
width:100%;
margin:0;
padding:0;
background:#fff;
border-radius:4px;
box-shadow:<
1044
span style="color: rgba(0, 0, 255, 1)">0 0px 5px #ccc;
}
.select_container li{
list-style:none;
font-size:12px;
line-height:30px;
padding:0 10px;
cursor:pointer;
}
.select_container li:hover,.select_container li.cur{
background:#dbf0ff;
}

 

前期工作做好之后,可以开始编写javascript代码了。按照惯例,还是把功能分析为一个一个步骤,再写具体的代码,思路会很清晰。

1. 获取已有的下拉框元素

这里需要获取多个元素,首先通过id获取select元素,再找到select元素的父元素。因为生成的美化下拉框需要放到父元素中。还要获取到select所有的option子节点。如下所示:

//获取下拉框
var eSelect = document.getElementById('selectElem');
//获取下拉框父节点
var eDd = eSelect.parentNode;
//获取下拉框选项
var aOptions = eSelect.getElementsByTagName('option');

 

2. 创建美化下拉框元素

先看一下美化后的下拉框,如下图所示:

 

 

 想一下这个下拉框应该包含哪些元素,一个div元素把所有内容包含在里面;一个input文本框,显示选中的值;input元素还需要一个父级容器div元素;一个ul加一组li元素组成下拉列表。好,知道需要哪些元素了,先来创建文本框部分,如下所示:

//创建美化select容器
var eContainer = document.createElement('div');
eContainer.className = 'select_container';
//创建input父级容器
var eInputCon = document.createElement('div');
eInputCon.className = 'input_container';
//创建input文本框,显示选中的值
var eInput = document.createElement('input');
//设置文本框不能输入
eInput.readOnly = true;
eInput.placeholder = '请选择';
//把文本框放到容器中
eInputCon.appendChild(eInput);

再来创建下拉列表。下拉列表可以创建一个ul元素,通过遍历aOptions下拉框选项,组合成li列表的字符串,通过innerHTML放到ul元素中,实现代码如下:

//创建ul元素,作为下拉列表容器
var eUl = document.createElement('ul');
//声明变量,用于组合下拉列表的字符串
var sLi = '';
//遍历原有下拉框选项
for(let i=0;i<aOptions.length;i++){
//判断是否是当前选中的选项
if(aOptions[i].selected){
//下拉选项组合到下拉列表字符串,当前选中的选项需要加上class添加当前样式
sLi += '<li class="cur" data-val="'+aOptions[i].value+'">'+aOptions[i].innerHTML+'</li>';
//当前选中的选项显示到文本框中
eInput.value = aOptions[i].innerHTML;
//eUl元素设置data-val属性值为当前选中选项的值
eUl.dataset.val = aOptions[i].value;
}else{
//非当前选中的选项,直接组合到下拉列表字符串,值设置到data-val属性中
sLi += '<li data-val="'+aOptions[i].value+'">'+aOptions[i].innerHTML+'</li>';
}
}
//下拉列表放到eUl元素中
eUl.innerHTML = sLi;
//默认隐藏下拉列表
eUl.style.display = 'none';

把创建好的这些元素嵌套好,再添加到原下拉框的父元素中,并隐藏原有的下拉框,如下所示:

//把文本框放到eContainer容器中
eContainer.appendChild(eInputCon);
//把下拉列表放到eContainer容器中
eContainer.appendChild(eUl);
//把eContainer元素放到select元素后面
eDd.appendChild(eContainer);
//隐藏原下拉框元素
eSelect.style.display = 'none';

现在效果是有了,但下拉框的功能还没实现,还需要给这些美化后的元素添加事件。

 

3. 实现打开下拉框功能

下拉框原有的功能是在文本框上点击鼠标,就会显示下拉列表。所以在eInput元素上绑定click事件来显示下拉列表,如下所示:

//设置下拉框打开状态,0为关闭,1为打开
var status = 0;
//绑定click事件,用于显示下拉列表
eInput.addEventListener('click',event=>{
//判断下拉框是否已打开
if(status){
//下拉框打开则关闭下拉框
eUl.style.display = 'none';
}else{
//下拉框关闭则打开下拉框
eUl.style.display = 'block';
}
//修改下拉框状态
status = +!status;
},false);

可以看到,在eInput元素上点击,可以打开和关闭下拉框了。但选择下拉选项还是无效的。在下拉选项上也绑定click事件

 

4. 下拉选项绑定click事件,点击时修改下拉框的值,如下所示:

//获取下拉选项列表元素的集合
var eLi = eUl.getElementsByTagName('li');
//遍历下拉列表
for(let i=0;i<eLi.length;i++){
//给每一个li元素绑定点击事件
eLi[i].addEventListener('click',(event)=>{
//修改下拉框状态为已关闭状态
status = 0;
//清除所有列表的class
for(let n=0;n<eLi.length;n++){
eLi
.className = '';
}
//激活当前列表选中样式
eLi[i].className = 'cur';
//设置下拉框当前选中值
eUl.dataset.val = eLi[i].dataset.val;
//还需要把值设置到原select元素上
eSelect.value = eUl.dataset.val;
//触发原select上的函数
typeof eSelect.onchange=='function'&&select.onchange();
//修改eInput元素显示的值
eInput.value = eLi[i].innerHTML;
//关闭下拉框
eUl.style.display = 'none';
},false);
}

目前为止,功能基本完成。不过只能在选择选项后或再在文本框上点击才能关闭下拉框。所以还需要修改一下功能,在页面其他位置点击时也能关闭下拉框

 

5. 在document绑定点击事件,用于关闭下拉框。

注意两点:一是在下拉框关闭时需要取消document上的绑定事件;二是eContainer元素上点击时需要阻止冒泡,否则下拉框会打不开了。修改后的代码如下:

//设置下拉框打开状态,0为关闭,1为打开
var status = 0;
//绑定click事件,用于显示下拉列表
eInput.addEventListener('click',event=>{
//判断下拉框是否已打开
if(status){
//下拉框打开则关闭下拉框
eUl.style.display = 'none';
//取消document上的绑定事件
document.removeEventListener('click',closeUl);
}else{
//下拉框关闭则打开下拉框
eUl.style.display = 'block';
//在document上绑定点击事件,用于关闭下拉框
document.addEventListener('click',closeUl,false);
}
//修改下拉框状态
status = +!status;
},false);

//获取下拉选项列表元素的集合
var eLi = eUl.getElementsByTagName('li');
//遍历下拉列表
for(let i=0;i<eLi.length;i++){
//给每一个li元素绑定点击事件
eLi[i].addEventListener('click',(event)=>{
//修改下拉框状态为已关闭状态
status = 0;
//清除所有列表的class
for(let n=0;n<eLi.length;n++){
eLi
.className = '';
}
//激活当前列表选中样式
eLi[i].className = 'cur';
//设置下拉框当前选中值
eUl.dataset.val = eLi[i].dataset.val;
//还需要把值设置到原select元素上
eSelect.value = eUl.dataset.val;
//触发原select上的函数
typeof eSelect.onchange=='function'&&select.onchange();
//修改eInput元素显示的值
eInput.value = eLi[i].innerHTML;
//关闭下拉框
eUl.style.display = 'none';
//取消document上的绑定事件
document.removeEventListener('click',closeUl);
},false);
}

//绑定到document上关闭下拉框的函数
function closeUl(){
//修改下拉框状态为已关闭状态
status = 0;
//关闭下拉框
eUl.style.display = 'none';
//取消document上的绑定事件
document.removeEventListener('click',closeUl);
}

//阻止冒泡,否则点击时冒泡到document上,会导致下拉框刚打开就关闭
eContainer.addEventListener('click',event=>{
event.stopPropagation();
});

一个美化后的下拉框已经完成,如果动手一步一步实现它,理解应该会更深一些。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: