实现一个年、月、季度联动SELECT的javascript代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实现一个年、月、季度联动SELECT的javascript代码

Javascript: javascript据option的value值快速设定初始的selected选项; document.open() 与 document.write()的区别; javascript实现轮显新闻标题链接; 一段效率很高的for循环语句使用方法; 使一个函数作为另外一个函数的参数来运行的javascript代码; javascript引用对象的方法代码; javascript下给元素添加事件的方法与代码; JS 页面内容搜索，类似于 Ctrl+F功能的实现代码; js 事件小结表格区别; 用js实现计算代码行数的简单方法附代码; 收藏的js表单验证控制代码大全; 提供一款很不错的万年历查询; 用javascript实现计算两个日期的间隔天数; 用javascript实现在小方框中浏览大图的代码; 用js实现上传图片前的预览（TX的面试题）; 用javascript实现li 列表数据隔行变换背景颜色; (currentStyle)javascript为何有时用style得不到已设定的CSS的属性; 总结AJAX相关JS代码片段和浏览器模型; 超强推荐的js编程中的简洁写法收集; javascript 函数式编程

No. « ‹ 78 79 80 81 › »

技术文章搜索

关键字

Javascript 中的实现一个年、月、季度联动SELECT的javascript代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 54 ::

收藏到网摘: n/a

javascript 复选框选择/全选后特效 javascript事件模型代码

点击运行可以看到效果:

<body>
<table border=0 height=30px >
<tr>
<td width=80px>
<select onchange="displaySubmenu(this.value)">
<option value="none">请选择报告类型</option>
<option value="1,4">月度报告</option>
<option value="1,3">季度报告</option>
<option value="1,2">半年报告</option>
<option value="1">年度报告</option>
</select>
</td>
<td>
<select id="submenu_1" name="year" style="display:none;"></select>
</td>
<td>
<select id="submenu_2" name="semiyear" style="display:none;"></select>
<select id="submenu_3" name="quarter" style="display:none;"></select>
<select id="submenu_4" name="month" style="display:none;"></select>
</td>
<td>
<input id="ok" type="button" onClick='GetValue();' value="取值">
</td>
</tr>
</table>
<script>
function GetValue(){ var objlist = document.getElementsByTagName("SELECT"); var tmp = new Array(); var tap = objlist[0].options[objlist[0].selectedIndex].text; strTmp=""; var j = 1; for(var i=1;i<objlist.length;i++){ if(objlist[i].style.display!="none"){ strTmp += objlist[i].options[objlist[i].selectedIndex].text + "-"; j++; } } strTmp = strTmp.substring(0,strTmp.length-1); alert(tap); alert(strTmp);
}
function hideAll(){
for(i=1;i<5;i++){
var select = document.getElementById("submenu_"+i);
while(select.options.length>0){
select.options.remove(0);
}
select.style.display = "none";
}
}
function initSelect(index){
var select = document.getElementById("submenu_"+index);
var now = new Date();
var currentYear = now.getYear();
var month = now.getMonth();
switch(index){
case 1:
for(i=-5;i<=5;i++){
var value = currentYear+i;
var item = new Option(value,value);
select.options.add(item);
}
select.selectedIndex = 5;
select.style.display = "block";
break;
case 2:
var semiyears = new Array("上半年","下半年");
for(i=0;i<2;i++){
var item = new Option(semiyears[i],i+1);
select.add(item);
}
select.selectedIndex = Math.floor(month/6);
select.style.display = "block";
break;
case 3:
var quarters = new Array("一季度","二季度","三季度","四季度");
for(i=0;i<4;i++){
var item = new Option(quarters[i],i+1);
select.add(item);
}
select.selectedIndex = Math.floor(month/3);
select.style.display = "block";
break;
case 4:
var months = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
for(i=0;i<12;i++){
var item = new Option(months[i],i+1);
select.add(item);
}
select.selectedIndex = month;
select.style.display = "block";
break;
default:
break;
}
}
function displaySubmenu(command){
hideAll();
if(command != "none"){
var commands = command.split(",");
for(l=0;l<commands.length;l++){
initSelect(parseInt(commands[l]));
}
}
}
</script>
</body>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript 复选框选择/全选后特效 javascript事件模型代码

Javascript 中的 实现一个年、月、季度联动SELECT的javascript代码

评论 (0) All

Javascript 中的实现一个年、月、季度联动SELECT的javascript代码