手写原生JS实现美观下拉单选选择框：代码+实例

194 浏览量更新于2024-08-28 收藏 85KB PDF 举报

本文档介绍了如何使用原生JavaScript实现自定义的下拉单选选择框功能，以解决浏览器自带下拉框在美观性和一致性上的问题。作者采用构造函数的方式对下拉框组件进行了封装，将主要的方法和事件定义在原型上。代码使用了ES6的语法，对于需要兼容低版本浏览器的开发者，建议将相关代码转换为ES5或使用Babel工具处理。首先，HTML部分展示了如何在页面上创建一个ID为"main"的div元素，这是选择框的基础容器，通过传递参数来初始化自定义选择框对象： ```html <!DOCTYPE html> <html> <head> ... <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>DiySelect</title> <link rel="stylesheet" href="index.css" rel="external nofollow"> </head> <body> <div id="main" class="main"></div> <script src="index.js"></script> <script> document.addEventListener("DOMContentLoaded", function() { const select1 = new $Selector({ eleSelector: "#main", options: [ { name: "选项1", value: "0" }, { name: "选项2", value: "1" }, { name: "选项3", value: "2" } ], defaultText: "选项2" }); }); </script> </body> </html> ``` 在JavaScript代码中，`$Selector`构造函数接收四个参数：选择器（用于定位div元素）、选项数组（定义下拉列表项）、默认文本以及可能的其他配置。当页面加载完成时，会创建一个新的`select1`实例，并将其添加到指定的`#main`元素中。 CSS部分没有提供，但提到了样式参考了阿里和Iview UI库，这意味着可能会有一些基础的布局和样式规则，例如清除默认样式、设置盒模型等。整个实现的核心是构造函数的定义和事件绑定，它允许用户动态创建和管理下拉选择框，同时提供了定制化的选项和默认值。为了使代码在所有浏览器上运行顺畅，开发者需要考虑兼容性问题，如将箭头函数、模板字符串等ES6特性转换为ES5语法，或者利用Babel这类工具进行转换。这篇文章提供了一个基础的自定义下拉单选选择框实现，通过JavaScript编程实现了可扩展且具有一定的美化功能的组件，适合开发者在实际项目中参考和学习。

原生原生JS实现自定义下拉单选选择框功能实现自定义下拉单选选择框功能

浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，UI一般给的下拉框也是和原生的下拉框差别比较大的，这

就需要自己写一个基本功能的下拉菜单/下拉选择框了。最近，把项目中用到的下拉框组件重新封装了一下，以构造函数的方

式进行封装，主要方法和事件定义在原型上，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。代码用

了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,或者直接bable转下。

先放个预览图吧，后面有最终的动态效果图：（样式和交互参考了阿里和Iview UI库）

下面是主要的HTML代码(包含部分js调用代码)：

<!DOCTYPE html>

<html>

<head>

<title>Diy Select</title>

</head>

<body>

document.addEventListener("DOMContentLoaded",function(){

const select1 = new $Selector({

eleSelector:"#main",

options:[

{name:"选项1",value:"0"},

{name:"选项2",value:"1"},

{name:"选项3",value:"2"}

defaultText:"选项2"

});

})

</script>

</body>

</html>

页面中定义了id为main的div，即为选择框所要添加到的元素。传入参数即可。

接着就是样式CSS部分了，没啥说的了，手动滑稽：

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

.main {

padding: 40px;

}

.my-select {

display: inline-block;

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38597300

粉丝: 6

手写原生JS实现美观下拉单选选择框：代码+实例

js 自定义个性下拉选择框示例

自定义控件之组合式控件，下拉选择框

使用原生JS封装自定义下拉单选选择框组件

基于jquery实现的自定义风格的下拉列表框.zip

jquery 实现下拉选择框方便好看的选择样式

jQuery Select 下拉单选框模拟插件 V1.3.6.2.zip

原生js实现高效机票城市选择器代码

极简设计：自定义下拉菜单与抽屉控件

常见js实现功能单选框、复选框、通过div模拟下拉列表框...

antdesignvue的下拉选择框在单选时如何实现可随意输入

最新资源