前端的开发_select的宽度动态变化

开发前端 流程
web前端开发流程图
最新简单的前端开发流程
<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <script src=”https://cdn.bootcss.com/jquery/2.2.4/jquery.js”></script>
        <style>
            select {
                width: 60px;
            }
        </style>
    </head>
    <body>
        <!– 如何让select标签不被内容撑大,而是被选中的option的宽度动态撑大 –>
        <select name=”aa” id=”se1″ onchange=”se_change()”>
            <option value=”111″ selected=”selected”>111</option>
            <option value=”222″>22222</option>
            <option value=”333″>33333333</option>
            <option value=”444″>44444444444</option>
            <option value=”555″>555555555555555</option>
        </select>
        <script>
            //让select的长度自适应,而不是固定不变
            //生成一个内联标签,来通过内联标签来获取高度
            var se_span = $(‘<span></span>’)
            $(‘body’).prepend(se_span)
            $(se_span).css({ display: ‘none’ })
            //当select内容变化的时候做处理
            function resetSelectWidth(obj) {
                var oo = obj.find(‘option’)
                $.each($(oo), function(index, item) {
                    var cc = obj
                        .find(‘option’)
                        .eq(index)
                        .prop(‘selected’)
                    var selectId = obj.find(‘option:selected’)
                    var lh = $(selectId).html()
                    se_span.html(lh)
                    var sh = se_span.outerWidth()
                    obj.css({ width: sh + 20 })
                })
            }
            //调用上面的方法,在select内容发生改变的时候
            function se_change() {
                resetSelectWidth($(‘#se1’))
            }
        </script>
    </body>
</html>
前端开发操作流程
传统前端开发发布流程图
web前端开发流程规范
» 本文来自:前端开发者 » 《前端的开发_select的宽度动态变化》
» 本文链接地址:https://www.rokub.com/7768.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!