程序技术好文:纯原生javascript下拉框表单美化实例教程

简介: 程序技术好文:纯原生javascript下拉框表单美化实例教程

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


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


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


[/span>div class="select_wrap" id="selectWrap"

[/span>dl

[/span>dt

[/span>dd

[/span>select id="selectElem"

[/span>option value="1"

[/span>option value="2"

[/span>option value="3"

[/span>option value="4"

[/span>option value="5"

[/span>option value="6"





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


.select_wrap{


Width</span>:800px;


margin:30px auto;


}


.select_wrap dt{


float:left;


Width</span>:120px;


line-Height</span>:36px;


text-align:right;


font-size:14px;


}


.select_wrap dd{


margin-left:130px;


line-Height</span>:36px;


}


.select_wrap input【type=text】,.select_wrap input【type=password】{


Height</span>:24px;


line-Height</span>:22px;


padding:0 5px;


border:1px solid #aaa;


border-radius:2px;


}


.select_wrap .btn{


padding:0 20px;


color:#fff;


cursor:pointer;


line-Height</span>: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;


top:15px;


right:8px;


display:inline-block;


Height</span>:0px;


border:6px solid transparent;


border-top-color:#ccc;


pointer-events:none;


}


.input_container input{


Height</span>:30px;


line-Height</span>:28px;


padding:0 5px;


border:1px solid #aaa;


border-radius:4px;


}


.input_container //代码效果参考:http://www.jhylw.com.cn/063729577.html

input:focus{

border-color:#129cff;


outline:none;


box-shadow:0 0 6px #65bfff;


}


.select_container ul{


position:absolute;


top:35px;


Width</span>:100%;


margin:0;


padding:0;


background:#fff;


border-radius:4px;


box-shadow:0 0px 5px #ccc;


}


.select_container li{


list-style:none;


font-size:12px;


line-Height</span>: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 = //代码效果参考:http://www.jhylw.com.cn/562235531.html

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{


//判断下拉框是否已打开


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

//给每一个li元素绑定点击事件


eLi【i】.addEventListener('click',(event)=>{


//修改下拉框状态为已关闭状态


status = 0;


//清除所有列表的class


for(let n=0;n

eLi【n】.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

//给每一个li元素绑定点击事件


eLi【i】.addEventListener('click',(event)=>{


//修改下拉框状态为已关闭状态


status = 0;


//清除所有列表的class


for(let n=0;n

eLi【n】.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();


});


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

相关文章
|
13天前
|
JavaScript 前端开发 IDE
TypeScript vs. JavaScript:技术对比与核心差异解析
TypeScript 作为 JavaScript 的超集,通过静态类型系统、编译时错误检测和强大的工具链支持,显著提升代码质量与可维护性,尤其适用于中大型项目和团队协作。相较之下,JavaScript 更灵活,适合快速原型开发。本文从类型系统、错误检测、工具支持等多维度对比两者差异,并提供技术选型建议,助力开发者合理选择。
185 1
|
25天前
|
监控 JavaScript 前端开发
JavaScript加密与解密技术:Hook技术应用案例分析
以上案例展示了如何利用JavaScript Hook技术结合强大且广泛采纳标准化算法(如AES),无缝地集成进Web应用程序以增强通信安全性。此种方法不仅能够确保敏感信息得到有效保护,并且由于它们操作适度透明、无需重构已存在代码基础架构而具备较高实际可行性及易操作性。
74 11
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
153 19
|
4月前
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架,将其核心功能映射为图论模型,通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法,模拟访问权限判断,优化动态策略更新与多层级访问控制。结合流量监控数据,提升网络安全响应能力,为企业自主研发提供理论支持,推动智能化演进,助力数字化管理。
115 4
|
10月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
296 1
|
5月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
106 13
|
6月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5817 24
|
7月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
234 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
7月前
|
监控 网络协议 算法
基于问题“如何监控局域网内的电脑”——Node.js 的 ARP 扫描算法实现局域网内计算机监控的技术探究
在网络管理与安全领域,监控局域网内计算机至关重要。本文探讨基于Node.js的ARP扫描算法,通过获取IP和MAC地址实现有效监控。使用`arp`库安装(`npm install arp`)并编写代码,可定期扫描并对比设备列表,判断设备上线和下线状态。此技术适用于企业网络管理和家庭网络安全防护,未来有望进一步提升效率与准确性。
240 8
|
8月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
260 3