下拉菜单
1.获取下拉菜单值选中的索引：selectedIndex
2.options[n]:表示的是获取option的这个节点
options[n].value：获取到值,n表示索引
3.随机产生数据的方式：math对象的方法：random():该方法随机的范围为0~1
4.分组
<optgroup label="标题内容"></optgroup>
下拉菜单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<script type="text/javascript">
function prov(){
var Provies=document.for1.provies.value;
var City=document.for1.city.value;
if(Provies=='陕西省'){
var num=Math.round(Math.random()*2+1);
var index=document.for1.city.options[num].value;
document.for1.city.value=index;
if(City=='渭南市'){
var num1=Math.round(Math.random()*2+4);
var index1=document.for1.xian.options[num].value;
document.for1.xian.value=index1;
}else if(City=='宝鸡市'){
var num1=Math.round(Math.random()*2+7);
var index1=document.for1.xian.options[num].value;
document.for1.xian.value=index1;
}else if(City=='汉中市'){
var num1=Math.round(Math.random()*2+10);
var index1=document.for1.xian.options[num].value;
document.for1.xian.value=index1;
}
}else if(Provies=='山西省'){
var num=Math.round(Math.random()*2+4);
var index=document.for1.city.options[num].value;
document.for1.city.value=index;
if(City=='太原市'){
var num1=Math.round(Math.random()*2+1);
var index1=document.for1.xian.options[num].value;
document.for1.xian.value=index1;
}else if(City=='大同市'){
var num1=Math.round(Math.random()*2+4);
var index1=document.for1.xian.options[num].value;
document.for1.xian.value=index1;
}else if(City=='阳泉市'){
var num1=Math.round(Math.random()*2+7);
var index1=document.for1.xian.options[num].value;
document.for1.xian.value=index1;
}
}else{
var num=Math.round(Math.random()*2+7);
var index=document.for1.city.options[num].value;
document.for1.city.value=index;
if(City=='郑州市'){
var num1=Math.round(Math.random()*2+1);
var index1=document.for1.xian.options[num].value;
document.for1.xian.value=index1;
}else if(City=='开封市'){
var num1=Math.round(Math.random()*2+4);
var index1=document.for1.xian.options[num].value;
document.for1.xian.value=index1;
}else if(City=='洛阳市'){
var num1=Math.round(Math.random()*2+7);
var index1=document.for1.xian.options[num].value;
document.for1.xian.value=index1;
}
}
}
</script>
</head>
<body>
<form action="" method="post" name="for1">
<label for="userName">
省份:
<select name="provies" onchange="prov();">
<option>--请选择省份--</option>
<option>陕西省</option>
<option>山西省</option>
<option>河南省</option>
</select>
城市:
<select name="city" onchange="prov();">
<option>--请选择城市--</option>
<optgroup label="陕西省">
<option>渭南市</option>
<option>宝鸡市</option>
<option>汉中市</option>
</optgroup>
<optgroup label="山西省">
<option>太原市</option>
<option>大同市</option>
<option>阳泉市</option>
</optgroup>
<optgroup label="河南省">
<option>郑州市</option>
<option>开封市</option>
<option>洛阳市</option>
</optgroup>
</select>
<!--县区:
<select name="xian">
<option>--请选择县区--</option>
<optgroup label="渭南市">
<option>临渭区</option>
<option>大荔县</option>
<option>澄城县</option>
</optgroup>
<optgroup label="宝鸡市">
<option>小鸡</option>
<option>母鸡</option>
<option>公鸡</option>
</optgroup>
<optgroup label="汉中市">
<option>洋县</option>
<option>勉县</option>
<option>西乡县</option>
</optgroup>
<optgroup label="太原市">
<option>太县</option>
<option>原县</option>
<option>太原县</option>
</optgroup>
<optgroup label="大同市">
<option>大县</option>
<option>同县</option>
<option>大同县</option>
</optgroup>
<optgroup label="阳泉市">
<option>阳县</option>
<option>泉县</option>
<option>阳泉县</option>
</optgroup>
<optgroup label="郑州市">
<option>郑县</option>
<option>州县</option>
<option>郑州县</option>
</optgroup>
<optgroup label="开封市">
<option>尉氏县</option>
<option>开县</option>
<option>封县</option>
</optgroup>
<optgroup label="洛阳市">
<option>洛县</option>
<option>洛洛县</option>
<option>阳阳县</option>
</optgroup>
</select>-->
</label>
</form>
</body>
</html>
计算器案例
window.onload=function(){
var btn=document.getElementsByTagName('button');
for(var i=0;i<btn.length;i++){
btn[i].id='btn01'+i;
btn[i].onclick=function(){
var txt1Value=document.getElementById('txt1');
var txt2Value=document.getElementById('txt2');
var txt3Value=document.getElementById('txt3');
var num1=parseFloat(txt1Value.value);
var num2=parseFloat(txt2Value.value);
// var num3=parseFloat(txt3Value.value);
if(this.id=='btn010'){
txt3Value.value=num1+num2;
// txt1Value='';
// txt2Value='';
}else if(this.id=='btn011'){
txt3Value.value=num1-num2;
// txt1Value='';
// txt2Value='';
}else if(this.id=='btn012'){
txt3Value.value=num1*num2;
// txt1Value='';
// txt2Value='';
}else if(this.id=='btn013'){
txt3Value.value=num1/num2;
// txt1Value='';
// txt2Value='';
}else{
alert('所选择的不在范围之内');
}
}
}
}
复选框案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框</title>
<script type="text/javascript">
window.onload=function(){
// var length=document.for1.txt1.length;
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
var taste=document.for1.txt1;
var count=0;
for(var i=0;i<taste.length;i++){
if(taste[i].checked==true){
count++;
alert(taste[i].value);
}
}
alert(count);
}
}
</script>
</head>
<body>
<form action="" method="post" name="for1">
<fieldset>
<legend>兴趣爱好</legend>
<label><input type="checkbox" name="txt1" value="篮球" checked="checked"/>篮球</label><br />
<label><input type="checkbox" name="txt1" value="足球"/>足球</label><br />
<label><input type="checkbox" name="txt1" value="排球"/>排球</label><br />
<label><input type="checkbox" name="txt1" value="羽毛球"/>羽毛球</label><br />
<input type="submit" id="btn1" value="提交" />
</fieldset>
</form>
</body>
</html>
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
