<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="../09-08jQuery/jquery-2.1.1.min.js"></script>
</head>
<body onload = "init();">
<h1>1--<span id="x">xx</span>--<span id="y">xxx</span></h1>
<select id="selt1" onchange="change();">
<option value=""></option>
</select>
<script type="text/javascript">
function total(max) {
var sum = 0;
for (i = 1; i <= max; i++){
sum = sum + i;
}
return sum;
}
function init() {
var selt1 = "";
for(i = 1; i <= 200; i++){
selt1 = selt1 + "<option value='"+i+"'>"+i+"</option>";
}
document.getElementById("selt1").innerHTML = selt1;
}
function change() {
a =parseInt(document.getElementById("selt1").value);
document.getElementById("y").innerHTML = total(a);
document.getElementById("x").innerHTML = a;
}
</script>
</body>
</html>
解析几点:
- onload = "init();初始化函数,在body里面先初始化。
- for(i = 1; i <= 200; i++){2.for(i = 1; i <= 200; i++){
selt1 = selt1 + “”+i+"";
}
document.getElementById(“selt1”).innerHTML = selt1;
此处由于是用的js,无法直接通过id往里面添加option因此,只能写成字符串形式,再转换。后期可以直接用jq的添加节点的方法(没试起来)。
3.select所得的value值其实是字符串需要转换成整形。
解决上面的疑惑
function init() {
for(i = 1; i <= 200; i++){
as = $("<option value='"+i+"'>"+i+"</option>");
$("#selt1").append(as);
}
}
相同的函数改为用jq的方法直接添加option标签。可以少一行代码,而且不是拼接字符串,变成往select里多次添加option。更加易懂。