广告区

广告区


本站消息

站长简介/公众号


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

如何运行这个 html 组合框示例?

发布于2022-06-22 23:05     阅读(1025)     评论(0)     点赞(24)     收藏(5)




大家好,我一直在寻找一个关于如何使 html 选择看起来像组合框的简单示例。我从这个链接中找到了一个示例代码片段它实际上是对类似于我的问题的答案。它的回答是Samich它有一个jsfiddle 链接我从 jsfiddle 复制了代码并对其进行了一些调整以使其在我的机器上运行,但我无法使其运行。

下面是代码(大部分代码都是 Samich 写的):

<html>
    <head>
        <style type="text/css">
            #dropdown { position:absolute; width:200px; display:none; }
            #dropdown li:hover { background:#ccc; cursor:pointer; }
        </style>
        <script type="text/javascript" src="jquery1.6.4min.js"></script>
        <script type="text/javascript" > 
            $('#btn').click(function() {
                var pos = $('#txt').offset();
                pos.top += $('#txt').width();
                $('#dropdown').fadeIn(100);
                return false;
            });

            $('#dropdown li').click(function() {
                $('#txt').val($(this).text());
                $(this).parent().fadeOut(100);
            });
        </script>
    </head>

    <body>
        <input type="text" id="txt" /><a href="#" id="btn">V</a>
        <ul id="dropdown">
            <li>Value 1</li>
            <li>Value 2</li>
            <li>Value 3</li>
            <li>Value 4</li>
            <li>Value 5</li>
            <li>Value 6</li>
            <li>Value 7</li>
            <li>Value 8</li>
            <li>Value 9</li>
            <li>Value 10</li>
            <li>Value 11</li>
            <li>Value 12</li>
        </ul>
    </body>
</html>

我对javascript和jquery很陌生,所以请大家多多包涵。提前非常感谢。


解决方案


<script type="text/javascript">
$(document).ready(function() { 
  $('#btn').click(function() {
    var pos = $('#txt').offset();
    pos.top += $('#txt').width();

    $('#dropdown').fadeIn(100);

    return false;
  });

  $('#dropdown li').click(function() {
    $('#txt').val($(this).text());
    $(this).parent().fadeOut(100);
  });
});
</script>

关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)
关注公众号:程序员总部,回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分






所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/371480/a670a83bd6fabf4a7d2c/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

24 0
收藏该文
已收藏

评论内容:(最多支持255个字符)