jquery带有参照数据的效果处理
几个简单小例子：
1.入门二级联动
2.二级联动
3.三级联动
4.简繁体转换
5.简单答题
6.创建课程表模板
这些例子有个共同的原理，就是有一个写好的参考数据模型，通过这个参考处理！什么参考，看下面！
一、最low的二级联动
我们运行下面的代码，引入jq类库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
$(".one-1").change(function(){
var relval=$(this).val();
handle(relval);
});
function handle(relval){
switch(relval)
{
case '1':
$(".tow-1").show().siblings().hide()
break;
case '2':
$(".tow-2").show().siblings().hide()
break;
case '3':
$(".tow-3").show().siblings().hide()
break;
case '4':
$(".tow-4").show().siblings().hide()
break;
default:
$(".sel-two").children().hide();
;
}
};
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</span>
<span class="sel-two">
<select class="tow-1" style="display:none">
<option>1-1</option>
<option>1-2</option>
<option>1-3</option>
<option>1-4</option>
</select>
<select class="tow-2" style="display:none">
<option>2-1</option>
<option>2-2</option>
<option>2-3</option>
<option>2-4</option>
</select>
<select class="tow-3" style="display:none">
<option>3-1</option>
<option>3-2</option>
<option>3-3</option>
<option>3-4</option>
</select>
<select class="tow-4" style="display:none">
<option>4-1</option>
<option>4-2</option>
<option>4-3</option>
<option>4-4</option>
</select>
</span>
</body>
</html>
完全靠具体的分支判断去告诉要显示哪一个，如果少还可以，如果不是1-5而是20多个怎么办，估计这么写就累死，而且页面会有一大推select标签
二、二级联动流程实现
我引导大家这么去想：
1.页面存放一级的select标签，不过没有option内容，
2.一级select的option都是动态插入内容
3.内容我们放在一个数组里，如['请选择'，1,2,3,4]
4.找到一级select循环插入这些内容，
5.给一级select加change事件，输出一级select内容
下面是引导后的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=["请选择",1,2,3,4];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
alert(relval)
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>
我是利用jq的$.each工具函数，大家用for是一样的，现在我们完成了一级的实现。
接下来的引导：
1.我们点击一级后，我要弹出和他相关的所有内容，
2.我们可以充实数组，把一维的变为多维数组，如下
["请选择",1,2,3,4] 改为
[["请选择",'no'],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
形成如此数组，我们知道给一级select添加内容就是 arr[0][0]遍历处理了
3.输出一级内容相关的关系内容
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=[["请选择",'no'],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
alert(onearr[i][1])
}
});
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>
除了一级内容为“请选择”时，其他点击选中弹出的内容就应该是我们二级select的option，大家已经可以发现
我们对代码进行动态节点插入操作：
排除第一项，就是onearr[i][0]的i等于0的不插入select
根据一级select的内容与数组作对比，如果相等
开始创建二级select，并且把相关的内容循环插入select
我们每次二级select插入前要先删除它，避免累计
为了结构的统一，我们把数组改成[["请选择",[]],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
没有的就让相关数组为空
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=[["请选择",[]],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
if(onearr[i][1].length==0){
$(".sel-two").children().remove();
}else{
$(".sel-two").children().remove();
var twosel=$("<select></select>")
$(".sel-two").append(twosel);
$.each(onearr[i][1],function(j,ele){
twosel.append('<option>'+onearr[i][1][j]+'</option>')
});
};
}
});
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>
三、三级联动
我们预览下面的二级联动，是不是有很相识的感觉
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=[["请选择",[]],["河北省",["唐山市","石家庄"]],["河南省",["郑州市","开封市","洛阳市","平顶山市"]],["吉林省",["长春市","四平市","白山市"]],["北京市",["朝阳区"]]];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
if(onearr[i][1].length==0){
$(".sel-two").children().remove();
}else{
$(".sel-two").children().remove();
var twosel=$("<select></select>")
$(".sel-two").append(twosel);
$.each(onearr[i][1],function(j,ele){
twosel.append('<option>'+onearr[i][1][j]+'</option>')
});
};
}
});
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>
选择省之后，关联出省所有的市，我们做的三级，就应该在二级市的选中后关联出县，没有的如北京不弹出
我们知道，我们的二级select是js添加，俗称脚本添加，这样的元素不能和一级select一样监听事件，要用过
delegate去处理，我们为了合理处理，修改如下：
1.数组 市加入“请选择”
2.给脚本添加的二级select添加事件测试
3.添加三级select容器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=[["请选择",[]],["河北省",["请选择","唐山市","石家庄"]],["河南省",["请选择","郑州市","开封市","洛阳市","平顶山市"]],["吉林省",["请选择","长春市","四平市","白山市"]],["北京市",["请选择","朝阳区"]]];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
if(onearr[i][1].length==0){
$(".sel-two").children().remove();
}else{
$(".sel-two").children().remove();
var twosel=$('<select class="two-1"></select>')
$(".sel-two").append(twosel);
$.each(onearr[i][1],function(j,ele){
twosel.append('<option>'+onearr[i][1][j]+'</option>')
});
};
}
});
});
$(".sel-two").delegate(".two-1","change",function(){
alert("未来元素或者脚本添加元素监听事件")
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
<span class="sel-three">
</span>
</body>
</html>
我们浏览页面，弹出二级下拉，选择选项出现了提示，提示部分就是我们三级弹出的代码位置
引导：
1.我们已经处理了一级，二级会补充数组，在增加一层数据结构
2.事件处理
我们对代码做二级处理就可以了，复制一级事件代码内容到二级事件内部，通过数组遍历和判断，
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var onearr=
[
["请选择",[]],
["河北省",
[["请选择",[]],
["唐山市",["玉田县","丰润县"]],
["石家庄",["穷死县","穷县"]]]],
["河南省",
[["请选择",[]],
["郑州市",["1县"]],
["开封市",[99]],
["洛阳市",[]],
["平顶山市",[]]]],
["吉林省",
[["请选择",[]],
["长春市",[]],
["四平市",[]],
["白山市",[]]]],
["北京市",
[["请选择",[]],
["朝阳区",[]]]]
];
$.each(onearr,function(i,ele){
$(".one-1").append('<option>'+onearr[i][0]+'</option>')
});
var twoindex=-1;
$(".one-1").change(function(){
var relval=$(this).val();
$.each(onearr,function(i,ele){
if(onearr[i][0]==relval){
if(onearr[i][1].length==0){
$(".sel-two").children().remove();
$(".sel-three").children().remove();
}else{
twoindex=i;
$(".sel-two").children().remove();
$(".sel-three").children().remove();
var twosel=$('<select class="two-1"></select>')
$(".sel-two").append(twosel);
$.each(onearr[i][1],function(j,ele){
twosel.append('<option>'+onearr[i][1][j][0]+'</option>')
});
};
}
});
});
$(".sel-two").delegate(".two-1","change",function(){
var tworelval=$(this).val();
$.each(onearr[twoindex][1],function(i,ele){
if(onearr[twoindex][1][i][0]==tworelval){
if(onearr[twoindex][1][i][1].length==0){
$(".sel-three").children().remove();
}else{
$(".sel-three").children().remove();
var threesel=$('<select class="three-1"></select>')
$(".sel-three").append(threesel);
$.each(onearr[twoindex][1][i][1],function(j,ele){
threesel.append('<option>'+onearr[twoindex][1][i][1][j]+'</option>')
});
};
}
});
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
</select>
</span>
<span class="sel-two">
</span>
<span class="sel-three">
</span>
</body>
</html>
四、简繁体转换
var onearr= [ ["请选择",[]], ["河北省", [["请选择",[]], ["唐山市",["玉田县","丰润县"]], ["石家庄",["穷死县","穷县"]]]], ["河南省", [["请选择",[]], ["郑州市",["1县"]], ["开封市",[99]], ["洛阳市",[]], ["平顶山市",[]]]], ["吉林省", [["请选择",[]], ["长春市",[]], ["四平市",[]], ["白山市",[]]]], ["北京市", [["请选择",[]], ["朝阳区",[]]]] ];
我们搭建关联多维数组，利用这种数据结构，实现了联动，其实这算是比较复杂了，这种结构可以变化的，多级联动的结构有很多，可以采用更加直观，处理简单的结构，这样的算是一种很容易理解的结构创建！！！
简繁体转换是什么？就是把你写的正常文字（一般都是简体，有人奇葩），转为过去人用的文字。
实现就是:
转 ->轉
换-> 換
引导：
1.首先的有客户输入文字区域，那就是多行文本框就行，
2.js获取所有文字（这时候是一堆字符串）
3.从头到后遍历一次，转换？？？
这时候如果我们的js中有这样类型提供好的数据的话：
[['转','轉'],['换','換']];
我们把客户字符串遍历与数组每一项的第一个值作对比，相等把当前值改为这一项的第二个值就实现转换了
我们就用这只有2个字的做处理，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var jfchange=[['转','轉'],['换','換']];
$("#btn").click(function(){
var str=$("#jfchange").val();
var arrstr=str.split("");
var len=arrstr.length;
if($("#btn").html()=="转为繁体"){
$.each(arrstr,function(i,e){
$.each(jfchange,function(j,e){
if(jfchange[j][0]==arrstr[i]){
arrstr[i]=jfchange[j][1];
}else{
arrstr[i]=arrstr[i];
};
});
});
$("#jfchange").val(arrstr.join(""));
$("#btn").html("转为简体");
}else{
$.each(arrstr,function(i,e){
$.each(jfchange,function(j,e){
if(jfchange[j][1]==arrstr[i]){
arrstr[i]=jfchange[j][0];
}else{
arrstr[i]=arrstr[i];
};
});
});
$("#jfchange").val(arrstr.join(""));
$("#btn").html("转为繁体");
};
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<textarea id="jfchange" style="width:500px; height:200px; border:1px solid #000;">
</textarea>
<button id="btn">转为繁体</button>
</body>
</html>
我们可以扩展简繁体的参考数据，这样就可以把更多文字转换了
这时候我们还可以想到一个相似效果，“汉字注音”。
五、简单答题处理
非常简单的处理，每次只显示一道题，选择结果后跳到下一道，答题完显示提交按钮，最后输出个统计
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var ok=['a','b','c','a','a'];
var rel=[];
$(".dd").find("input").change(function(){
rel.push($(this).val());
var obj=$(this);
setTimeout(function(){
obj.parent().parent().parent().hide().next().show();
},400);
});
$("#ok").click(function(){
var count=0;
$.each(rel,function(i,e){
if(rel[i]==ok[i]){
count+=1;
}
});
alert("正确个数是"+count+"个")
})
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<ul>
<li>
<p>1题</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none">
<p>2题</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none">
<p>3题</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none">
<p>4题</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none">
<p>5题</p>
<p class="dd">
<label><input type="radio" value="a"/>1</label>
<label><input type="radio" value="b"/>2</label>
<label><input type="radio" value="c"/>3</label>
</p>
</li>
<li style="display:none"><button id="ok">提交</button></li>
</ul>
</body>
</html>
六、创建课程表模板
一个课程表包含周和节次，创建模板就是创建周几到周几上课，有多少节次的表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var weekcc= ['星期一','星期二','星期三','星期四','星期五'];
inittab(5,6,6,weekcc,4,2,0);
$(".updatatab-two").find("select").change(function(){
var am=zhuanInt($(".tabam").val());
var pm=zhuanInt($(".tabpm").val());
var ye=zhuanInt($(".tabye").val());
var rowb=parseInt(am)+parseInt(pm)+parseInt(ye);
weekcc=[];
$(".weekcon:checked").each(function(index) {
weekcc.push($(this).siblings("span").html());
});
var colb=$(".weekcon:checked").length;
$("#tablebox").remove();
inittab(colb,rowb,rowb,weekcc,am,pm,ye);
});
$(".weekcon").click(function(){
var am=zhuanInt($(".tabam").val());
var pm=zhuanInt($(".tabpm").val());
var ye=zhuanInt($(".tabye").val());
var rowb=parseInt(am)+parseInt(pm)+parseInt(ye);
weekcc=[];
$(".weekcon:checked").each(function(index) {
weekcc.push($(this).siblings("span").html());
});
var colb=$(".weekcon:checked").length;
$("#tablebox").remove();
inittab(colb,rowb,rowb,weekcc,am,pm,ye);
});
//end
});
//fun+++调用的几个方法 ++++++++++++++++
function inittab(colval,rowval,jieci,weekc,am,pm,ye){
var tabc="<table width='100%' border='0' cellspacing='0' cellpadding='0' class='tablebox' id='tablebox'></table>";
$("#tabgu").append(tabc);
for(var i=0;i<rowval+1;i++){
var trc="<tr></tr>";
$("#tablebox").append(trc)
};
for(var j=0;j<colval+1;j++){
var tdc="<td></td>";
$("#tablebox").find("tr").append(tdc);
};
for(ii=1;ii<=jieci;ii++){
$("#tablebox").find("tr").eq(ii).find("td").eq(0).html("第"+ii+"节");
};
for(jj=1;jj<=weekc.length;jj++){
$("#tablebox").find("tr").eq(0).find("td").eq(jj).html(weekc[jj-1]);
};
for(var i1=1;i1<=am;i1++){
$("#tablebox").find("tr").eq(i1).addClass("am");
};
var i2val1=parseInt(am)+1;
var i2val2=parseInt(am)+parseInt(pm);
for(var i2=i2val1;i2<=i2val2;i2++){
$("#tablebox").find("tr").eq(i2).addClass("pm");
};
var i3val1=parseInt(am)+1+parseInt(pm);
var i3val2=parseInt(am)+parseInt(pm)+parseInt(ye);
for(var i3=i3val1;i3<=i3val2;i3++){
$("#tablebox").find("tr").eq(i3).addClass("ye");
};
};
function zhuanInt(yuanval){
if(yuanval=="不上课"){
return 0;
}else{
return yuanval;
}
};
//fun end
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
.wrapper{ width:1200px; margin:0 auto;}
.updatatab{ float:left; width:200px; background:#CCC;}
.tabcon{ float:left; width:800px;}
.tablebox{ border-collapse:collapse;}
.tablebox td{ border:1px solid #666; padding:20px;}
.updatatab-one label,.updatatab-two label{ display:block; margin:10px 5px;}
.am{ background:#fbf5e2;}
.pm{ background:#eef0f0;}
.ye{ background:#f8f7f4;}
</style>
</head>
<body>
<div class="wrapper">
<div class="updatatab">
<div class="updatatab-one">
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期一</span></label>
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期二</span></label>
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期三</span></label>
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期四</span></label>
<label><input type="checkbox" checked="checked" class="weekcon" /><span>星期五</span></label>
<label><input type="checkbox" class="weekcon" /><span>星期六</span></label>
<label><input type="checkbox" class="weekcon" /><span>星期日</span></label>
</div>
<div class="updatatab-two">
<label>上午<select class="tabam">
<option>不上课</option><option>1</option>
<option>2</option><option>3</option>
<option selected="selected">4</option>
<option>5</option><option>6</option>
</select>
</label>
<label>下午<select class="tabpm">
<option>不上课</option><option>1</option>
<option selected="selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</label>
<label>晚上<select class="tabye">
<option>不上课</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select></label>
</div>
</div>
<div class="tabcon" id="tabgu">
</div>
</div>
</body>
</html>