如果是渲染完再排序那么页面会发生”闪现“，严重点会出现页面短暂混乱，如果列表很长那么页面将”自己动起来“，很吓人的。比起页面”自己动起来“宁愿让它短暂的"转圈圈"一点点加载。
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
select {width: 75pxfont-size: 20pxcolor:#000000font-family: '宋体'}
#main {width: 400pxheight: 20pxmargin:0 autoword-spacing: 0px}
#main select { color:green}
#main select[name=S1] { color:orange}
</style>
</head>
<body>
<div id="main"></div>
<script>
initSelects()
function initSelects() {
var data = {
10:[
[12,110,190,'ESA1210'],
[16,150,230,'ESA1610'],
[20,190,270,'ESA2010']
],
20: [
[24,230,310,'ESA2410'],
[28,270,350,'ESA2810'],
[32,310,390,'ESA3210'],
[36,350,430,'ESA3610']
],
40: [
[40,390,470,'ESA4010'],
[44,430,510,'ESA4410'],
[48,470,550,'ESA4810'],
[52,510,590,'ESA5210']
]
}
var selectNames = ['S1', 'S2', 'S3', 'S4', 'S5']
var sunits = ['mm', 'n', 'mm', 'mm', '']
var main = document.getElementById('main')
var S1 = document.createElement('select')
S1.name = selectNames[0]
S1.onchange = function() {
for(var i = 0i <SG2s.lengthi++)
SG2s[i].options.length = 0
data[this.value].forEach(function(line) {
for(var i = 0i <SG2s.lengthi++) {
var atom = line[i]
SG2s[i].options.add( new Option(atom + sunits[i], atom) )
}
})
}
for(var y in data)
S1.options.add(new Option(y + select[0], y))
main.append(S1)
var SG2s = []
var names
for(var i = 0i <4i++) {
var s = document.createElement('select')
s.name = selectNames[i + 1]
s.onchange = function() {
for(var i = 0i <SG2s.lengthi++)
SG2s[i].selectedIndex = this.selectedIndex
}
SG2s.push(s)
main.append(s)
}
S1.onchange()
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）