jQuery 下拉菜单选择器

原创 已于 2025-06-27 13:30:17 修改 · 502 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #前端

于 2025-06-05 17:25:06 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 下拉菜单选择器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .dropdown-container {
            margin: 20px 0;
        }
        .custom-dropdown {
            position: relative;
            width: 100%;
        }
        .dropdown-select {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
        }
        .dropdown-select:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
        }
        .dropdown-options {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: white;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 4px 4px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
        }
        .dropdown-options.show {
            display: block;
        }
        .dropdown-option {
            padding: 10px 15px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .dropdown-option:hover {
            background-color: #f0f0f0;
        }
        .dropdown-option.selected {
            background-color: #e0e0e0;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
            border-left: 4px solid #4CAF50;
        }
        .footer {
            margin-top: 30px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }
        .footer a {
            color: #4CAF50;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>jQuery 下拉菜单选择器</h1>
        
        <div class="dropdown-container">
            <div class="custom-dropdown">
                <select id="fruit-select" class="dropdown-select">
                    <option value="">请选择水果</option>
                    <option value="apple">苹果</option>
                    <option value="banana">香蕉</option>
                    <option value="orange">橙子</option>
                    <option value="grape">葡萄</option>
                    <option value="watermelon">西瓜</option>
                    <option value="strawberry">草莓</option>
                </select>
                <div id="fruit-options" class="dropdown-options"></div>
            </div>
        </div>
        
        <div class="result">
            <p>您选择的水果是: <span id="selected-fruit">无</span></p>
        </div>
        
        <div class="footer">

        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化下拉选项
            function initDropdownOptions() {
                const $select = $('#fruit-select');
                const $optionsContainer = $('#fruit-options');
                
                // 清空现有选项
                $optionsContainer.empty();
                
                // 添加选项
                $select.find('option').each(function() {
                    if ($(this).val() !== '') {
                        const $option = $('<div class="dropdown-option" data-value="' + $(this).val() + '">' + $(this).text() + '</div>');
                        $optionsContainer.append($option);
                    }
                });
                
                // 设置当前选中的选项
                const selectedValue = $select.val();
                if (selectedValue) {
                    $optionsContainer.find('.dropdown-option[data-value="' + selectedValue + '"]').addClass('selected');
                    $('#selected-fruit').text($select.find('option:selected').text());
                }
            }
            
            // 初始化
            initDropdownOptions();
            
            // 点击选择框显示/隐藏选项
            $('.dropdown-select').on('click', function(e) {
                e.stopPropagation();
                $(this).next('.dropdown-options').toggleClass('show');
            });
            
            // 点击选项
            $(document).on('click', '.dropdown-option', function() {
                const value = $(this).data('value');
                const text = $(this).text();
                
                // 更新选择框
                $('#fruit-select').val(value);
                
                // 更新显示
                $('#selected-fruit').text(text);
                
                // 更新选中状态
                $('.dropdown-option').removeClass('selected');
                $(this).addClass('selected');
                
                // 隐藏选项
                $('.dropdown-options').removeClass('show');
            });
            
            // 点击其他地方隐藏选项
            $(document).on('click', function() {
                $('.dropdown-options').removeClass('show');
            });
            
            // 阻止事件冒泡
            $('.dropdown-options').on('click', function(e) {
                e.stopPropagation();
            });
            
            // 键盘导航
            $('.dropdown-select').on('keydown', function(e) {
                const $options = $(this).next('.dropdown-options');
                const $visibleOptions = $options.find('.dropdown-option:visible');
                const $selected = $options.find('.dropdown-option.selected');
                
                if (e.keyCode === 40) { // 向下箭头
                    e.preventDefault();
                    if (!$options.hasClass('show')) {
                        $options.addClass('show');
                    } else {
                        let next = $selected.length ? $selected.next('.dropdown-option') : $visibleOptions.first();
                        if (next.length) {
                            $selected.removeClass('selected');
                            next.addClass('selected');
                            next[0].scrollIntoView({ block: 'nearest' });
                        }
                    }
                } else if (e.keyCode === 38) { // 向上箭头
                    e.preventDefault();
                    let prev = $selected.length ? $selected.prev('.dropdown-option') : $visibleOptions.last();
                    if (prev.length) {
                        $selected.removeClass('selected');
                        prev.addClass('selected');
                        prev[0].scrollIntoView({ block: 'nearest' });
                    }
                } else if (e.keyCode === 13) { // 回车
                    e.preventDefault();
                    if ($options.hasClass('show') && $selected.length) {
                        $selected.trigger('click');
                    } else {
                        $options.toggleClass('show');
                    }
                } else if (e.keyCode === 27) { // ESC
                    e.preventDefault();
                    $options.removeClass('show');
                }
            });
        });
    </script>
</body>
</html>

ziblog
关注
Js操作Select大全
何足道也
11-21 2762
jquery操作select(取值，设置选中） 每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。 比如 1、设置value为pxx的项选中 $(".selector").val("pxx"); 2、设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr("selecte
JQuery-下拉菜单列表
weixin_50446072的博客
11-09 368
JQuery第一天下拉菜单案列 下拉菜单案列 <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px;
jquery 下拉框（select）根据id获得对应option的选择器写法
内沐的博客
01-22 9353
今天是我2016年最后一个工作日 ，就以一篇小技术来结束吧。 (“#selectId option[value=’”+optionId+”’]”)  还可为其设置属性(“#selectId option[value=’”+optionId+”’]”) 还可为其设置属性 (“#selectId option[value=’”+optionId+”’]”).attr(“selected”,tr
jQuery实现下拉菜单 （select option）
qq_48600969的博客
07-15 782
jQuery实现下拉菜单 （select option）
jQuery自定义select下拉框（一）
weixin_44924173的博客
05-07 3325
自定义select下拉框以满足项目的需求 直接上代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>selector</title> <link href="./css/selector.css...
jQuery下拉菜单选择器
zichenblog的博客
05-06 401
选项一</a><a href="#" data-value="option2">选项二</a><a href="#" data-value="option3">选项三</a><a href="#" data-value="option4">选项四未选择
移动端交互设计：使用jQuery实现下拉菜单选择功能
weixin_42600407的博客
10-02 2144
本文还有配套的精品资源，点击获取 简介：在移动设备上，由于触摸操作和屏幕空间限制，设计便捷的多级选择界面尤为重要。本代码通过利用jQuery库简化交互，配合触摸滑动事件处理，实现了从底部弹出的层级下拉菜单。详细解析了HTML结构、CSS样式和JavaScript逻辑的构建过程，以及响应式设计和性能优化的实现方法。同时强调了交互反馈的重要性，为移动应用或网站提供更丰富的用户体...
jquery 筛选选择器 下拉菜单
ygl6150373的博客
05-01 477
children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”)，子类选择器 find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器 siblings(selector) $(“#first”).siblings(“li”); ...
精选资源
jQuery下拉菜单分类搜索框代码_drop_jQuery下拉菜单分类搜索框代码_
09-30
在网页设计中，jQuery下拉菜单分类搜索框是一种常见的交互元素，它提供了高效且用户友好的导航和搜索体验。这个项目可能包含以下组件和知识点： 1. **jQuery库**: jQuery是一个广泛使用的JavaScript库，简化了DOM...
jQuery下拉菜单选择框特效.zip
10-05
jQuery下拉菜单选择框特效的实现涉及到jQuery的选择器、事件处理、动画效果，以及CSS的样式设计。通过巧妙结合这些技术，我们可以创建出交互性好、视觉效果出色的下拉菜单。无论是在网页表单、导航菜单还是其他交互...
jQuery输入框下拉选择菜单
06-24
在本主题"jQuery输入框下拉选择菜单"中，我们将探讨如何利用jQuery创建一个功能丰富的输入框，当用户点击时，会弹出一个下拉菜单，该菜单具有分页和键盘导航功能，模拟了传统的HTML `<select>` 元素但提供了更高级的...
jQuery搜索框下拉菜单选择插件
06-10
**jQuery搜索框下拉菜单选择插件**是一种增强用户交互体验的前端开发工具，它将传统的输入框与下拉菜单相结合，提供了丰富的筛选和选择功能。这种插件在网页表单设计中尤其常见，用于提高数据输入的效率和准确性。在...
jQuery下拉搜索菜单选择插件
04-25
总的来说，jQuery下拉搜索菜单选择插件通过结合Bootstrap的样式和jQuery的事件处理能力，实现了功能强大、用户体验良好的下拉菜单选择功能，极大地提升了网页的交互性和用户满意度。在实际项目中，可以根据标签所...
CSS 网页布局：技术基础与实践技巧
csbysj2020的博客
12-02 948
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
CSS 面试题
d81895606的博客
12-03 347
API类型特点微任务最常用，立即执行微任务现代API，推荐使用宏任务最小延迟，让出控制权宏任务Node.js特有，I/O后执行伪宏任务下一帧前，适合动画宏任务高优先级，比setTimeout快Node.js特快比微任务还快。
【JavaWeb】CSS_三种引入方式
qq_43494013的博客
12-05 417
【JavaWeb】CSS_三种引入方式
DevUI主题系统进阶：CSS-in-JS与暗黑模式无缝切换架构
m0_37613794的博客
12-04 817
本文深入解析了华为DevUI主题系统的混合架构实现方案，提出结合CSS-in-JS灵活性与CSS Variables性能优势的创新设计。核心内容包括：1）主题令牌管理算法，实现语义化到具体值的映射；2）运行时主题切换引擎，支持平滑过渡和状态持久化；3）性能优化策略，包括CSS变量作用域隔离和编译时优化。通过MateChat等大型项目验证，该方案显著提升了主题定制能力，使主题切换时间从300ms降至28ms，样式文件体积减少73%。文章还提供了从原理到实践的全套解决方案，包括React集成、组件适配和常见问题
css使用grid布局实现网格(表格)，动态调整行高，列宽，整体缩放，插入行，列，删除行，列
最新发布
qq_41505416的博客
12-07 104
摘要：本文演示了使用React和CSS Grid布局实现动态表格功能，包括单元格合并/取消合并、行列调整（高度/宽度）、整体缩放、行列插入（任意位置或末尾）、删除行列等操作。表格支持自适应容器，可实现等宽等高显示。通过Grid布局的灵活特性，实现了复杂的表格交互功能，相比传统table布局更具响应性和可控性。视频演示展示了完整的操作流程和效果。（135字）
CSS Animation 详解
Irene1991的博客
12-04 866
本文全面介绍了CSS动画技术，包括基础概念、关键帧规则、动画属性详解及实践示例。主要内容涵盖：1. 核心概念：关键帧(@keyframes)定义动画序列，动画属性控制行为；2. 详细解析8大动画属性及其应用场景；3. 提供加载动画、呼吸灯等5种典型实现示例；4. 性能优化技巧，如使用GPU加速属性；5. 响应式设计方法，包括媒体查询和CSS变量应用；6. 高级技巧如动画事件监听和状态控制；7. 常见问题解决方案和浏览器兼容性处理。文章强调遵循性能最佳实践和可访问性原则，适合开发者系统学习CSS动画技术。
jQuery下拉菜单美化选择插件发布
使用jQuery，可以轻松地选择DOM元素、添加事件监听器、创建动画效果等。jQuery库支持跨浏览器兼容性问题，极大地提高了开发效率。 2. 下拉框（select）的作用 下拉框在网页设计中扮演着重要的角色，通常用于从预...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值