今天我们队DOM进行了复习与练习,老师给我们讲解了两个例题,看上去简单,但是废了好大劲也没做出来,下面是对两个题的整理。
js中给下拉菜单添加内容:
<body>
<select id="s1" size="7">
</select>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="提交" />
<input id="btn2" type="button" value="删除" />
</body>
</html>
<script>
var s1 = document.getElementById("s1");
var txt1 = document.getElementById("txt1");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function() {
字符串拼接方法
s1.innerHTML += "<option>"
+ txt1.value
+ "</option>";
造对象方法
var opt = document.createElement('option');
opt.innerText = txt1.value;
s1.appendChild(opt);
txt1.value = '';
}
btn2.onclick = function(){
s1.selectedIndex
s1.selectedOptions[0]
appendChild
removeChild
s1.removeChild(s1.selectedOptions[0]);
}
</script>
js中选择进行下一步:
<body>
<input type="checkbox" id="ckb1" />
<input type="button" id="btn1" value="下一步" disabled="disabled" />
</body>
</html>
<script>
var ckb1 = document.getElementById("ckb1");
var btn1 = document.getElementById("btn1");
ckb1.onclick = function(){
if(ckb1.checked){
btn1.removeAttribute("disabled");
}else{
btn1.setAttribute("disabled","disabled");
}
}
</script>