DOM实例。

今天我们队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>
 

posted on 2017-09-26 22:00  小败哥哥。  阅读(83)  评论(0编辑  收藏  举报

导航