开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js仿select下拉框

在JavaScript中模拟一个<select>下拉框通常涉及到HTML、CSS和JavaScript的使用。以下是一个基础的概念解释和相关实现方式：

基础概念

HTML结构：创建一个包含选项列表的容器，通常是一个<div>元素，以及一个显示选中项的区域。
CSS样式：用于美化自定义的下拉框，使其看起来像原生的<select>元素。
JavaScript交互：添加事件监听器来处理用户的点击事件，显示或隐藏选项列表，并处理选中项的变化。

相关优势

定制性：可以完全控制下拉框的样式和行为，满足特定的设计需求。
交互性：可以添加额外的功能，如搜索、分组、多选等。
兼容性：可以解决某些浏览器对原生<select>元素样式支持不一致的问题。

类型

基础下拉框：简单的显示和隐藏选项列表。
可搜索下拉框：允许用户在下拉框中搜索选项。
多选下拉框：允许用户选择多个选项。
分组下拉框：将选项分组显示。

应用场景

表单设计：在需要用户选择信息的表单中使用。
数据过滤：在数据列表上方提供过滤选项。
配置设置：在设置页面中提供用户可配置的选项。

实现示例

以下是一个简单的自定义下拉框的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Select Box</title>
<style>
  .custom-select {
    position: relative;
    display: inline-block;
  }
  .select-selected {
    background-color: #ccc;
    padding: 5px;
    cursor: pointer;
  }
  .select-items {
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    display: none;
  }
  .select-items div {
    padding: 5px;
    cursor: pointer;
  }
  .select-items div:hover {
    background-color: #ddd;
  }
</style>
</head>
<body>

<div class="custom-select">
  <div class="select-selected">Select option</div>
  <div class="select-items">
    <div>Option 1</div>
    <div>Option 2</div>
    <div>Option 3</div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var selected = document.querySelector('.select-selected');
  var items = document.querySelector('.select-items');
  var options = items.querySelectorAll('div');

  selected.addEventListener('click', function() {
    items.style.display = items.style.display === 'block' ? 'none' : 'block';
  });

  options.forEach(function(option) {
    option.addEventListener('click', function() {
      selected.innerHTML = this.innerHTML;
      items.style.display = 'none';
    });
  });

  document.addEventListener('click', function(e) {
    if (!e.target.closest('.custom-select')) {
      items.style.display = 'none';
    }
  });
});
</script>

</body>
</html>

遇到的问题及解决方法

点击外部区域不关闭下拉框：可以通过监听文档的点击事件，并检查点击的目标元素是否在下拉框内部来解决。
选项过多时的性能问题：对于包含大量选项的下拉框，可以考虑使用虚拟滚动技术来优化性能。
样式兼容性问题：确保使用标准的CSS属性，避免使用特定浏览器不支持的特性。

通过上述方法，你可以创建一个功能完善且样式自定义的下拉框，以满足不同的应用场景需求。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

select 下拉框获取多值

select 下拉框获取多值 select下拉框选中，获取选中option的多个属性值试卷名称...paperName" name="paperName"/> select...{paper.paperId}" th:paperTime="${paper.examTotalTime}" th:text="${paper.paperName}"> select

1021 0

JQuery中的select下拉框

dataThree select> 一、select下拉框取值与赋值 1、设置value为3的项选 2、设置text为dataTwo的项选中...;j++){ $(“#selectId”).append(“”+data[j]+””); } JS的方法...$(“#SelectData”).find(“option:contains(‘3’)”).attr(“selected”, true); 四、判断在select下拉框中是否存在某个指定值的option...> 0) { console.log(“存在值”); }else{ console.log(不存在); } 第二种: (js方法)： var opts = document.getElementById...下拉框值避免重复添加 1、通过id找到select对应的value var res = $(“#SelectData“).find(“option[value=”4″]”); 2、进行判断 if(res.length

6.4K2 0

修改select下拉菜单样式(input下拉框select)

自带的select下拉菜单美观度实在不怎么样，并且不容易美化，当然我们可以模拟实现select下拉菜单，但是代码稍显复杂，不过也可以通过简单的CSS实现此效果，下面通过实例简单作一下介绍。..."> select name="select"> 星期1 星期2 星期3 星期4 select> 以上代码实现了实现了select下拉框美化效果...，当然这里也谈不上美观，因为在这里只是介绍一下它的实现原理，以供大家改造之用，下面简单介绍一下它的实现过程: 实现原理: 其实select下拉菜单美化最让人蛋疼的地方就是向下的箭头，在这里我们在select...下拉菜单外面套了一个div，并且div的宽度小于select下拉菜单的宽度，这样的目的是将select下来菜单的箭头给遮挡，然后再给次div设置一个背景图片作为下拉箭头，这样就实现了我们想要的效果。

3.3K1 0

用jQuery模拟select下拉框

很多时候，美工会觉得默认的select下拉框很难看（特别是右侧的下拉箭头按钮），他们通常喜欢用一个自定义的图标来代替这个按钮。...这样就只能用 js + div 来模拟了，倒腾了一番，用jQuery模拟了下，当然网上这种文章也不少，只是懒得去看找，又重新发明轮子鸟:) 自己实现的下拉框...style> js...不足之处： 1、按键盘上下键时，没有高亮的自动移动 2、键入文字自动过滤结果时，感觉相对原生的select有些不自然

3.6K1 0

select 下拉框不可选中

select 下拉框不可选中 disabled属性定义和用法 disabled 属性规定禁用下拉列表。被禁用的下拉列表既不可用，也不可点击。...实例 select disabled="disabled"> Volvo Saab select> select th:if="${detailPlan.isPublish} == 0" id="detailPlanKpIds...contains(kp.kpId)}"> select> 当isPublish=1 时不可编辑select 使用disabled...属性的select框值不能向后台传递，如果需要在页面展示时禁用select选择属性，但是提交数据时又需要提交select属性值，此时需要在提交之前移除disabled属性移除disabled属性 function

6881 0

vue渲染select下拉框的值

div class="tab-container"> select...item.id" :label="item.organName" :value="item.id" > select

3.8K4 0

Jquery 结合Json控制Select下拉框

Code jquery 操作 Select js...下拉框 for(var i=0;i<dSheng.head.length;i++){ $("...var oShi = $("#shi") oSheng.change(function(){//添加onchange事件 oShi.empty();//清空下级下拉框...id="sheng"> -------- select> select id="shi"> select>

2.3K9 0

ztree - 仿Select 下拉菜单

; $("body").off("mousedown", onBodyDown); } 获取焦点，显示ztree，添加事件，点击非登陆框和 ztree 的div 则收起，此处参考了官方的 select

1.8K2 0

vue-element的select下拉框赋值

但是后端有时候的返回值的数据类型都是不一样的就那select下拉框赋值来说： 1：当返回值是对象数组的时候 select v-model="value" placeholder...:key="item.value" :label="item.label" :value="item.value"> select...script> 123456789101112131415161718192021222324252627282930313233343536 当返回值是字符串数组的时候 select...el-option v-for="item in options" :key="item" :value="item"> select

4.6K6 0

vue提交select下拉框选中的值

questionForm.realName" placeholder="请输入昵称" /> select...item.organName" :value="item.id" > select

5.5K2 0

根据select下拉框值判断验证条件

根据select下拉框值判断当前选中的是哪个区域，并且判断当前选中区域里面的值是否为空，如果为空，则弹出弹框提示，请输入xx区域名称，以下只是一个小demo,随手复制黏贴到代码里面，能看的更加明白。.../4.3.1/css/bootstrap.min.css"> js..."> js/bootstrap.min.js"...size="1" name="type" id="type" class="form-control select2...button type="button" class="btn blue" id="addBtn">保存 /* 下拉框选择

3.6K3 0

vue-element怎么给select下拉框赋值？

看文档真的是一件非常快乐的事情，看别人写的代码，再跟自己写的代码一对比，立刻会发现有很多不同的地方，也可以学到很多新技能，从最简单的阅读学习起来，今天看的是select下拉框相关的。...PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard ---- select...value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }] select...下拉框赋值，当返回值是对象数组的时候渲染的时候只需要用v-for循环遍历数组，取出数组中的对象的值就行了 select v-model="value" placeholder...:key="item.value" :label="item.label" :value="item.value"> select

4.7K3 0

下拉菜单11+原生js获取select下拉框的selected的option项

数组转json并在后台对其解析具体实现想必大家在开发过程中也遇到类似问题，如果直接将js获取的数组传给后台，后台是无法区分数组的，因为js数组如果是二维的就是这样的：1,张三,23,2,李四,26...希望能给大家带去帮助首先需要在js里面对数组进行转换为json格式 js代码如下：代码如下: /** *js数组转json * */ function arrayToJson...获取select下拉框的selected的option项一....使用原生js，获取select标签下属性有selected的option项。...("select[name=items] option[selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex

8014 0

vue-element怎么给select下拉框赋值？

看文档真的是一件非常快乐的事情，看别人写的代码，再跟自己写的代码一对比，立刻会发现有很多不同的地方，也可以学到很多新技能，从最简单的阅读学习起来，今天看的是select下拉框相关的。...PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard ---- select...value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }] select...下拉框赋值，当返回值是对象数组的时候渲染的时候只需要用v-for循环遍历数组，取出数组中的对象的值就行了 select v-model="value" placeholder...:key="item.value" :label="item.label" :value="item.value"> select

5.1K4 1

Javascript获取select下拉框选中的的值

现在有一id=test的下拉框，怎么拿到选中的那个值呢？...分别使用javascript原生的方法和jquery方法 select id=”test” name=””> text1...text2 select> code: 一：javascript原生的方法 1:拿到select对象： var

7.9K4 0

Select下拉框使用ajax异步绑定数据

--绑定的下拉框--> 商品名称：输入关键字进行商家查询...//转化为json对象 var getdata = msg.data; var Content = "select...SupplierName + ""; } } Content += "select...hide(); }); }) 效果图：keyup()事件按键被松开时发生keyup()事件，从而触发ajax触发模糊查询获取后台数据库中的数据，然后动态绑定到下拉框中

1.7K2 0

vue的select下拉框多选项-multiple属性

下拉框单选或者多选项，支持删除的功能其实很简单的，需要添加一个属性为el-select设置multiple属性即可启用多选首先，看文档： https://element.eleme.cn/#/...zh-CN/component/select 饿了么这个框架的文档给的十分的全面，组件是非常的丰富的 ?... select v-model="value1" multiple placeholder="请选择"> <el-option v-for="item...> select v-model="value2" multiple collapse-tags style="margin-left: 20px;"...当select下拉框选择其中一个数据的时候，传到后端的参数 ? 当select下拉框选择其中多个数据的时候,传到后端的参数 ?

10.1K2 0

select下拉框组件禁用选项值怎么实现

效果如图背景需求下拉框的数据选项值是通过接口请求过来的，当时没有想明白将disabled为true写在哪里接口直接将数据渲染出来了，就是在后面继续再做判断；这个与当时的时间判断出数据是大同小异；...-- //指定部门主管的多选框 --> select v-model...:value="item.deptId" :disabled="item.disabled" > select...> //这个是请求下拉框的数据的请求方法 getEmployeeList(projectId) { return getOwnProject(projectId...selectDeptByCompanyId({ companyId: res.companyId }).then((response) => { //这里是所有的下拉框选项数据

2571 0

Vue-select下拉框组件清空选值

这个问题搞得头大，新增成功后，这个下拉框老清空不了，还是要看文档啊，在这里记录下 select label="name" :options="advertisers" v-model="form.advertiser_id..." :reduce="name => name.id" ref="ad"> select> 直接用this.form.advertiser_id = '' 清空是不行的...，找了很多资料还不如看文档来的快在组件中加入ref="ad" 在对应的js中在清空的位置调用clearSelection方法即可 this.

7.3K3 0

bootstrap select js操作

组件赋值就需要稍微变换一下了，如果你直接 $('#sel').val('1'); 这样赋值将会无效，正确的赋值方法为：

5.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭