前端的开发：select的宽度动态变化
摘要： 开发前端 流程 web前端开发流程图 最新简单的前端开发流程 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> <title></……
| 开发前端 流程 |
| web前端开发流程图 |
| 最新简单的前端开发流程 |
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<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
近期评论