文章/答案/技术大牛

发布

jquery仿select列表展示

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。使用 jQuery 可以方便地实现复杂的页面效果和交互。

类型

jQuery 仿 select 列表展示通常有以下几种类型：

下拉列表：用户点击一个按钮或输入框，弹出一个下拉列表供用户选择。
级联选择：多个 select 元素，前一个 select 的选择会影响后一个 select 的选项。
搜索选择：用户可以在输入框中输入内容，下拉列表会实时显示匹配的选项。

应用场景

表单控件：在表单中使用自定义的下拉列表，提升用户体验。
数据筛选：在数据展示页面中，使用下拉列表进行数据筛选。
配置选项：在设置页面中，使用下拉列表提供配置选项。

示例代码

以下是一个简单的 jQuery 仿 select 列表展示的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 仿 Select 列表展示</title>
    <style>
        .custom-select {
            position: relative;
            display: inline-block;
        }
        .select-items {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 100%;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .select-items div {
            padding: 8px 16px;
            cursor: pointer;
        }
        .select-items div:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="custom-select">
        <input type="text" id="select-input" readonly>
        <div class="select-items" id="select-items">
            <div>Option 1</div>
            <div>Option 2</div>
            <div>Option 3</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#select-input').click(function() {
                $('#select-items').toggle();
            });

            $('.select-items div').click(function() {
                var selectedOption = $(this).text();
                $('#select-input').val(selectedOption);
                $('#select-items').hide();
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：下拉列表无法显示

原因：可能是 jQuery 库未正确加载，或者 JavaScript 代码有误。

解决方法：

确保 jQuery 库已正确引入。
检查 JavaScript 代码是否有语法错误或逻辑错误。

问题：下拉列表显示位置不正确

原因：可能是 CSS 样式设置不当。

解决方法：

检查 .select-items 的 position 属性是否设置为 absolute。
调整 .select-items 的 top 和 left 属性，使其相对于父元素正确对齐。

问题：点击下拉列表外部区域时，下拉列表不会隐藏

原因：可能是缺少事件监听器来处理点击外部区域的事件。

解决方法：

添加一个点击事件监听器，监听整个文档的点击事件。
在事件处理函数中，判断点击的目标元素是否在下拉列表内，如果不在，则隐藏下拉列表。

$(document).click(function(event) {
    if (!$(event.target).closest('.custom-select').length) {
        $('#select-items').hide();
    }
});

通过以上方法，可以解决常见的 jQuery 仿 select 列表展示问题。

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

有帮助

没帮助

相关·内容

jQuery动态加载select下拉列表「建议收藏」

需求说明：　　以前使用的select下拉列表都是静态的，select 的option数据都是写死的。现在项目中的select需要根据不同的场景使用不同的数据，解决方式就是动态加载option数据。...但是在产品不同的需求时，动态select更能胜任其多样性。　　　　2、select有多种写法，这里是最简单的。步骤二：jQuery通过ajax请求获取动态的数据，并在jsp页面显示。...此代码由Java架构师必看网-架构君整理 function IninDepart(){ 　　$("#selectSM").remove();//清空select列表数据　　var state = 1;...[i]+""); 　　} 　　},error:function(){ 　　alertLayer("获取数据失败","error"); 　　} 　　}); } 　　注意：这里使用的是jQuery...SELECT GROUP_CONCAT(DISTINCT CONCAT(字段名称)) AS 字段名称或别名 FROM 表名步骤五：这里捎带说一下，如何获取select下拉列表选择的值　　//select

4.6K6 0

jQuery操作Select

jQuery是如何控制和操作select的。...先看下面的html代码 select id="test"> 选项一选项一...选项N select> 所谓jQuery操作“select”, 说的更确切一些是应该是jQuery控制 “option”，看下面的jQuery代码...).val()); $("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val()); //获取select...; //获取第二group下面第一个option的值 $('#test optgroup:eq(1) : option:eq(0)').val(); http://www.smartwei.com/jquery-control-select.html

1.4K7 0

jquery 操作 select

转自网络，留做备用 jQuery获取Select元素，并选择的Text和Value: 1....maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery获取Select元素，并设置的 Text和...$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 jQuery...option[text='jQuery']").attr("selected", true); 设置select option项: $("#select_id").append("<option value...option[text='4']").remove(); //删除TEXT值为4的Option 清空 Select: $("#ddlRegType ").empty(); jquery获得值： .val

1.4K2 0

jQuery操作Select

jQuery获取Select选择的Text和Value: 语法解释： 1....$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id...").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select...$("#select_id ").val(4); //设置Select的Value值为4的项选中 3....$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 jQuery添加/

1.2K7 0

jquery图片幻灯片（小图列表，大图展示）

/js/jquery.js"> <% p_id=request("p_id") sql1="select * from [share_pic] where p_id="&p_id set

2.3K2 0

ztree - 仿Select 下拉菜单

ztree - zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。...off" /> jQuery...; $("body").off("mousedown", onBodyDown); } 获取焦点，显示ztree，添加事件，点击非登陆框和 ztree 的div 则收起，此处参考了官方的 select

1.8K2 0

jquery操作select(取值，设置选中）

jquery操作select(取值，设置选中） 1....=$("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery添加/删除Select的Option项： 1....jQuery获取Select选择的Text和Value: $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发...很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。...的Text值为jQuery的项选中 jQuery添加/删除Select的Option项：语法解释： $("#select_id").append("

8.6K2 0

jquery操作select(取值，设置选中）

每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。...比如select class=”selector”>select> 1、设置value为pxx的项选中 $(“.selector”).val(“pxx”); 2、设置text为pxx的项选中...很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

3.4K1 0

jquery 获取当前select onchange事件

jquery 获取当前select onchange事件后台代码 @GetMapping("/add") public String add(HttpServletRequest request...seasonId = request.getParameter("seasonId"); mmap.put("seasonId",seasonId); //获取科目下考季列表...baseService.getSeasonListBySubjectId(subjectId); mmap.put("seasons",seasons); //获取当前路径对应考季id下的课程列表...> select name...> select name="

1221 0

jquery操作select的几种情况

jquery怎么操作select？...jquery操作select分为获取option的值、删除option、增加option、获取option的长度、清空select、判断select框中是否存在某个值。...(0).selectedIndex; //获取Select最大的索引值 jQuery设置Select选择的 Text 和 Value var maxIndex=$("#select_id option...Value值为4的项选中 $("#select_id ").val(4); //设置Select的Text值为jQuery的项选中 $("#select_id option[text='jQuery...//删除下拉列表中选中的项 $remove.appendTo('#select2'); //追加给对方 7、判断在 select 框中是否存在某一个值的选项 function

6922 0

jquery操作select(取值，设置选中）

二、很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。... var option = $("").val(1).text("pxx"); $(".selector2").append(option); }); 三、jQuery...option:last").attr("index"); //获取Select最大的索引值四、jQuery设置Select选择的 Text和Value: 语法解释： $("#select_id...$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中五、jQuery添加...$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 六、jquery radio取值，checkbox取值，select

2K3 0

jquery操作select（取值，设置选中）

的级联第二个select的值随着第一个select选中的值变化。...这在jquery中是非常简单的。...选择的Text和Value # 为Select添加事件，当选择其中一项时触发 $("#select_id").change(function(){//code...}); # 获取Select...Select索引值为1的项选中 $("#select_id ").get(0).selectedIndex=1; # 设置Select的Value值为4的项选中 $("#select_id ").val...(4); # 设置Select的Text值为jQuery的项选中 $("#select_id option[text='jQuery']").attr("selected", true); 添加/删除Select

3.8K3 0

JQuery生成图片列表

DOCTYPE html> 2 3 4 生成图片列表 5 6.../jquery-3.4.1.min.js"> 13 14 15 16 17 18 19 20 <

7.7K2 0

jQuery: select option get display value

要件：select option 从DB取得，除了value, 还希望对表示值等进行处理# get the display value of Select using javascript$(function...console.log(value,text) }).trigger("change"); // initial call});$('#consumption :selected').text(); var select...= document.getElementById('consumption');var text = select.options[select.selectedIndex].text; 详细：html...定义（django 4.1）※value, text 以外，可以用html data来传递select id="tax1" name="tax1" data-id="tax_name1"> 图片select option value text data 取得$("select").each(function(){ // 消費税code設定：消費税表的主键（1，2，23，24）

8472 0

Swift 小仿微博列表

前言鉴于目前Swift的ABI(应用程序二进制接口)、API(应用程序编程接口) 基本稳定，对于Swift的学习有必要提上日程了，这个Swift仿微博列表的效果是我最近一边学习《Swift入门到精通...1、列表页cell中的imageView的大小是固定平均分配的，而每张图片的大小和比例都是不一样的，为了保证图片不变形，按比例只展示图片的中心部分，怎么做哪？...if (image.size.height/image.size.width > 3) { //大长图仅展示顶部部分内容 let proportion: CGFloat = height

1.4K3 0

jQuery设置select的某个option选中

jQuery设置select的某个option选中 html部分商品类型:... select class="form-control" id="type">select>

4K2 0

JQuery中的select下拉框

dataThree select> 一、select下拉框取值与赋值 1、设置value为3的项选 2、设置text为dataTwo的项选中...的级联，即第二个select的值随着第一个select选中的值变化。...下拉框添加option JQuery的方法： 1、先定义一个数组 var data=new Array(); 2、然后，给数组data赋值 3、最后把数组的值写入下拉框 for(var j=0;j<data.length...的动态选中 id为select的id,根据content查找对应的下拉列表值，找到之后绑定选中事件。...元素 SelectData是select的的id 第一种: (jquery方法)： var res = $(’#SelectData’).find(“option[value=”1″]”); if (res.length

6.4K2 0

jQuery设置select默认选中的值

今天说一说jQuery设置select默认选中的值,希望能够帮助大家进步!!!...select name="tableName"> 节点isp用户...节点用户 select> $("#tableName option[text=节点用户]")...org/1999/xhtml"> jQuery...设置 select、radio、checkbox 默认选中的值 jquery-1.7.1.min.js"></script

6.4K2 0

jQuery 下拉查询筛选插件Combo Select

插件描述：Combo Select 是一款友好的 jQuery 下拉框插件，在 PC 浏览器上它能模拟一个简单漂亮的下拉框，在 iPad 等移动设备上又能回退到原生样式。...Combo Select 能够对选项进行检索过滤，同时支持键盘控制。...使用方法 1、引入文件 select.css"> jquery.min.js"> jquery.combo.select.js"> 2、HTML select> select name="month" tabindex="-1">select> select-arrow"> <ul

6.2K2 0

用jQuery模拟select下拉框

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

3.6K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

jquery仿select列表展示

基础概念

相关优势

类型

应用场景

示例代码

遇到的问题及解决方法

问题：下拉列表无法显示

问题：下拉列表显示位置不正确

问题：点击下拉列表外部区域时，下拉列表不会隐藏

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐