俺要讲话
2020-12-11 09:15
采纳率: 66.7%
浏览 199

点击图片,展开select下拉框的方法

web端,点击图片,直接展开下拉框选项,网上找不到相关方法,都说要自己写个模拟select的。

但是我技术不够,实在写不出来,有没有大佬分享下相关的demo给我借鉴下,在这里谢谢啦

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

19条回答 默认 最新

  • 我的中二病又犯了 2020-12-11 10:58
    已采纳
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>测试</title>
        <style>
            ul {
                list-style: none;
                width: 100px;
                border: 1px solid #999;
                margin: 0;
                padding: 0;
            }
            img {
                width: 30px;
                height: 30px;
                background-color: red;
            }
            li {
                cursor: pointer;
                padding: 10px;
            }
            li:hover {
                background-color: rgba(0, 100, 13, 0.534);
            }
        </style>
    </head>
    
    <body>
        <div>
            <img src="" alt="">
            <ul>
                <li>选项一</li>
                <li>选项二</li>
                <li>选项三</li>
                <li></li>
            </ul>
        </div>
    //此处插入jquery引入
        <script type="text/javascript">
            $(function () {
      
                $('img,ul>li').on('click', function (event) {
                    if (event.type == 'click') {
                        $('ul').css("display") == 'none' ? 
                        $('ul').css("display", "block") : 
                        $('ul').css("display", "none");
                    }
                })
            })
            
        </script>
    </body>
    
    </html>
    点赞 打赏 评论
  • 我的中二病又犯了 2020-12-11 10:07

    需求细致些,展开的是什么样的下拉选项,另外是用原生js、jquery、实现还是vue?

    点赞 打赏 评论
  • 俺要讲话 2020-12-11 10:10

    js,jq实现都行,对select的样式要求不高,默认的就行了,只是要点击图片就能弹出select框,平时select是隐藏的

    点赞 打赏 评论
  • 俺要讲话 2020-12-11 10:20

    类似这样,点击图片,下拉框出来,选择选项后,下拉框隐藏,暂时对下拉框样式不要求,不要太丑就行

    点赞 打赏 评论
  • qq_1872583947 2020-12-11 10:59

    不知道你用不用bootstrap,下面给出一个基于bootstrap的案例

     

    点赞 打赏 评论
  • qq_1872583947 2020-12-11 11:00

    <!DOCTYPE html>

    <html lang="zh-CN">

     

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->

        <title>Bootstrap 101 Template</title>

     

        <!-- Bootstrap -->

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

     

        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->

        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->

        <!--[if lt IE 9]>

          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

        <![endif]-->

    </head>

     

    <body>

        <h1>你好,世界!</h1>

        <div class="dropdown">

            <img src="..." alt="..." class="img-rounded" data-toggle="dropdown">

            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

                <li><a href="#">Action</a></li>

                <li><a href="#">Another action</a></li>

                <li><a href="#">Something else here</a></li>

                <li role="separator" class="divider"></li>

                <li><a href="#">Separated link</a></li>

            </ul>

        </div>

     

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->

        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    </body>

     

    </html>

    点赞 打赏 评论
  • 我的中二病又犯了 2020-12-11 11:00

     

    点赞 打赏 评论
  • qq_1872583947 2020-12-11 11:01

    点赞 打赏 评论
  • 我的中二病又犯了 2020-12-11 11:01

    看下这个是否符合你需要

    点赞 打赏 评论
  • 俺要讲话 2020-12-11 11:17

    可以了,符合我需要的东西,我先弄好了结算给你

     

    点赞 打赏 评论
  • 俺要讲话 2020-12-11 11:22

    能不能用select标签和option选项,因为我原先写好了功能

    点赞 打赏 评论
  • 俺要讲话 2020-12-11 11:25

    这个是我自己原来写的

    点赞 打赏 评论
  • 我的中二病又犯了 2020-12-11 11:40

    点击选项时,你是想要把id=“order”的div全部隐藏吗

    点赞 打赏 评论
  • 我的中二病又犯了 2020-12-11 11:40

    还是说只是隐藏select标签

     

    点赞 打赏 评论
  • 我的中二病又犯了 2020-12-11 11:53

     

     

     

    change事件

    $("select").change(function(){
                $('select').css("display") == 'none' ? 
                    $('select').css("display", "block") : 
                    $('select').css("display", "none");
            });

    可以把三元运算符部分直接加在你的onchange里面

     

     

     

    点赞 打赏 评论
  • qq_1872583947 2020-12-11 13:41

    如果不是很懂代码的话,建议直接复制粘贴吧,不用纠结select和option,能实现需求就好了

    点赞 打赏 评论
  • 俺要讲话 2020-12-11 14:17

     

    不是那个意思,是我触发图片的onclick =“test()”那个函数后,展开我的下拉框,现在我自己写的这个如果想要展开下拉框得2部,第一步要点击图片,然后出现下拉框,点击下拉框才会出现选项。下面是我原先的流程和代码

     

    我就是想要把这个test()点击事件变成,我点击图标,直接出现有选项的下拉框,不要只出现这个

     

    点赞 打赏 评论
  • 我的中二病又犯了 2020-12-11 16:38

    原生的select选择框的下拉内容需要点击选择框才会出现。其实这个位置用select本身就不太适合,你是通过点击图片来产生下拉内容的,这样就会多个select选择框显得多余。看你这页面应该是属于导航栏里面的一个icon按钮功能,一般直接用个ul>li比较合适的

    点赞 打赏 评论
  • 俺要讲话 2020-12-11 17:20

    我按照你给的那个在调试了

    点赞 打赏 评论

相关推荐 更多相似问题