这种效果如何实现？ — 编程爱好者社区

主题：这种效果如何实现？

ir77 [专家分：570] 发布于 2007-04-19 20:32:00

下面三个复选框，第一个选定后，后面的两个随知而改变内容，如第一个选择加分了，第二个复选框就只显示加分的部分选项（从+1到+5），如果第一个选扣分，那就只显示扣分的部分，而第三个选项“截止日期”只有在第一个选择置顶的时候才出现，其他情况下均不显示。

如果太麻烦，那就只写一下思路和大概要用的语句就行了，最好能解释一下原理，谢谢了。

动作：
      <SELECT name="operate">
      <option value="" selected>操作</option>
      <option value="1">加分</option>
      <option value="2">精华</option>
      <option value="3">置顶</option>
      <option value="4">锁帖</option>
      <option value="5">删除</option>
      <option value="6">警告</option>
      <option value="7">扣分</option>
      </SELECT>

分值加减：
      <SELECT name="pointchange">
      <option value="5">+5</option>
      <option value="4">+4</option>
      <option value="3">+3</option>
      <option value="2">+2</option>
      <option value="1">+1</option>
      <option value="0" selected>0</option>
      <option value="-1">-1</option>
      <option value="-2">-2</option>
      <option value="-3">-3</option>
      <option value="-4">-4</option>
      <option value="-5">-5</option>
      </SELECT>

截止时间：
      <SELECT name="timelimite">
      <option value="1">一天</option>
      <option value="3" selected>三天</option>
      <option value="5">五天</option>
      <option value="7">一周</option>
      <option value="14">两周</option>
      <option value="30">一个月</option>
      <option value="60">两个月</option>
      <option value="90">一季度</option>
      <option value="">不限</option>
      </SELECT>

本帖地址： http://bbs.pfan.cn/post/227697.html

回复列表（共12个回复）

沙发

ir77 [专家分：570] 发布于 2007-04-20 11:27:00

自己顶一下

板凳

wangsdong [专家分：21390] 发布于 2007-04-20 12:19:00

<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
</HEAD>
<script>
function f()
{
   d=document.getElementById("div1");
   if(this.form1.operate.value=="1")
   {
   str="分值加减<SELECT name=\"pointchange\">";
    for (i=1;i<=5;i++)
    {
    str=str+"<option value=\""+i+"\">+"+i+"</option>";
    }
    str=str+"</select>";
    d.innerHTML=str;
    //str="";
   }
   if(this.form1.operate.value=="7")
   {
    str="分值加减<SELECT name=\"pointchange\">";
    for (i=1;i<=5;i++)
    {
    str=str+"<option value=\""+i+"\">-"+i+"</option>";
    }
    str=str+"</select>";
    d.innerHTML=str;

   }
   if(this.form1.operate.value=="3")
   {
   d1=document.getElementById("div2");
   str="截止时间：<SELECT name=\"timelimite\"><option value=\"1\">一天</option><option value=\"3\" selected>三天</option>      <option value=\"5\">五天</option><option value=\"7\">一周</option><option value=\"14\">两周</option><option value=\"30\">一个月</option><option value=\"60\">两个月</option><option value=\"90\">一季度</option><option value=\"\">不限</option></SELECT>";
   d1.innerHTML=str;
   }
}
</script>
<BODY>
  <form name="form1" method="post">
  动作：
      <SELECT name="operate" onchange="f()">
      <option value="" selected>操作</option>
      <option value="1">加分</option>
      <option value="2">精华</option>
      <option value="3">置顶</option>
      <option value="4">锁帖</option>
      <option value="5">删除</option>
      <option value="6">警告</option>
      <option value="7">扣分</option>
      </SELECT>

<span id="div1">
</span>

<span id="div2">
</span>

  </form>
</BODY>
</HTML>

3 楼

oyh484203 [专家分：5890] 发布于 2007-04-20 13:52:00

也可以数组实现效果！

4 楼

ir77 [专家分：570] 发布于 2007-04-20 17:17:00

二楼的好像有点问题，我刚才又写了一个，但是提示出错，

<script language="javascript">
function f()
    {
switch(this.form.operate.value)
{
case "1":
select1.style.display = "";
select2.style.display = "none";
select3.style.display = "none";
select4.style.display = "none";
select5.style.display = "none";
select6.style.display = "none";
break;
case "2":
select1.style.display = "none";
select2.style.display = "";
select3.style.display = "none";
select4.style.display = "none";
select5.style.display = "none";
select6.style.display = "none";
break;
case "3":
select1.style.display = "none";
select2.style.display = "";
select3.style.display = "none";
select4.style.display = "none";
select5.style.display = "none";
select6.style.display = "";
break;
case "4":
select1.style.display = "none";
select2.style.display = "none";
select3.style.display = "";
select4.style.display = "none";
select5.style.display = "none";
select6.style.display = "none";
break;
case "5" or "6":                   （这里提示错误1）
select1.style.display = "none";
select2.style.display = "none";
select3.style.display = "none";
select4.style.display = "";
select5.style.display = "none";
select6.style.display = "none";
break;
case "7":
select1.style.display = "none";
select2.style.display = "none";
select3.style.display = "none";
select4.style.display = "none";
select5.style.display = "";
select6.style.display = "none";
break;
}
}
</script>
<form name="form" method="post">
动作：
<SELECT name="operate" onchange="f()">   （这里提示错误2）
<option value="" selected>操作</option>
<option value="1">加分</option>
<option value="2">精华</option>
<option value="3">置顶</option>
<option value="4">锁帖</option>
<option value="5">删除</option>
<option value="6">警告</option>
<option value="7">扣分</option>
</SELECT>
<label id=select1 style="DISPLAY:none">
分值加减：<select name="pointchange">
<option value="5">+5</option>
<option value="4">+4</option>
<option value="3">+3</option>
<option value="2">+2</option>
<option value="1">+1</option>
</SELECT></label>
<label id=select2 style="DISPLAY:none">
分值加减：<select name="pointchange">
<option value="5">+5</option>
<option value="4">+4</option>
<option value="3">+3</option>
<option value="2">+2</option>
<option value="1">+1</option>
<option value="0" selected>0</option>
</SELECT></label>
<label id=select3 style="DISPLAY:none">
分值加减：<select name="pointchange">
<option value="5">+5</option>
<option value="4">+4</option>
<option value="3">+3</option>
<option value="2">+2</option>
<option value="1">+1</option>
<option value="0" selected>0</option>
<option value="-1">-1</option>
<option value="-2">-2</option>
<option value="-3">-3</option>
<option value="-4">-4</option>
<option value="-5">-5</option>
</SELECT></label>
<label id=select4 style="DISPLAY:none">
分值加减：<select name="pointchange">
<option value="0" selected>0</option>
<option value="-1">-1</option>
<option value="-2">-2</option>
<option value="-3">-3</option>
<option value="-4">-4</option>
<option value="-5">-5</option>
</SELECT></label>
<label id=select5 style="DISPLAY:none">
分值加减：<select name="pointchange">
<option value="-1">-1</option>
<option value="-2">-2</option>
<option value="-3">-3</option>
<option value="-4">-4</option>
<option value="-5">-5</option>
</SELECT></label>
<label id=select6 style="DISPLAY:none">
截止时间：<SELECT name="timelimite">
<option value="1">一天</option>
<option value="3" selected>三天</option>
<option value="5">五天</option>
<option value="7">一周</option>
<option value="14">两周</option>
<option value="30">一个月</option>
<option value="60">两个月</option>
<option value="90">一季度</option>
<option value="">不限</option>
</SELECT>
</label>
</form>

错误1：
行: 60
字符: 11
错误: 缺少 ':'
代码: 0

错误2：
行: 87
字符: 1
错误: 缺少对象
代码: 0

5 楼

wangsdong [专家分：21390] 发布于 2007-04-20 17:35:00

你运行我的程序了吗？我这边运行没有问题。

6 楼

ir77 [专家分：570] 发布于 2007-04-20 17:35:00

问题解决了，把这个：
case "5" or "6":
select1.style.display = "none";
select2.style.display = "none";
select3.style.display = "none";
select4.style.display = "";
select5.style.display = "none";
select6.style.display = "none";
break;
换成这个：
case "5":
select1.style.display = "none";
select2.style.display = "none";
select3.style.display = "none";
select4.style.display = "";
select5.style.display = "none";
select6.style.display = "none";
break;
case "6":
select1.style.display = "none";
select2.style.display = "none";
select3.style.display = "none";
select4.style.display = "";
select5.style.display = "none";
select6.style.display = "none";
break;

但是不明白上面的方式错在哪里？这个程序有没有更简单的写法？？
原来我写成这样：
<label id=select1 style="DISPLAY:none">
分值加减：<select name="pointchange">

<label id=select2 style="DISPLAY:none">
<option value="5">+5</option>
<option value="4">+4</option>
<option value="3">+3</option>
<option value="2">+2</option>
<option value="1">+1</option>
</lable>

<label id=select3 style="DISPLAY:none">
<option value="0" selected>0</option>
</lable>

<label id=select4 style="DISPLAY:none">
<option value="-1">-1</option>
<option value="-2">-2</option>
<option value="-3">-3</option>
<option value="-4">-4</option>
<option value="-5">-5</option>
</lable>

</SELECT>
</label>

但是这样不对，又没有什么类似的简洁点的表达方式呢？

7 楼

wangsdong [专家分：21390] 发布于 2007-04-20 17:37:00

case "5" or "6":
改成
case "5","6":
这样试试

8 楼

ir77 [专家分：570] 发布于 2007-04-20 17:46:00

你的程序没有问题，运行正常，但是比如说我第一个选项选择“置顶”后，置顶日期的选项出现了，但是此时我把第一个选项改成其他的，这时候置顶日期的选项不会自动隐藏。

现在我这样改后，不需要的内容可以随时隐藏，更加灵活。

不过你到是给我提供了一个很好的思路，我不太会javascript，一点头绪都没有，麻烦看看我六楼的问题有没有办法解决？

9 楼

oyh484203 [专家分：5890] 发布于 2007-04-21 09:25:00

你写得不够简洁，这个也许是你要的效果：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>

<script language="javascript">
sall=new Array();
for(i=0;i<5;i++){
sall[i]=new Array("+"+(5-i),"1","+"+(5-i));
}
sall2=new Array();
for(i=0;i<5;i++){
sall2[i]=new Array("-"+(5-i),"7","-"+(5-i));
}
function changeselect(selvalue){
document.getElementById("td1").style.display="block";
document.getElementById("td2").style.display="none";
document.form1.pointchange.length=0;
var selvalue=selvalue;
if(document.form1.operate.value == 1){
for(i=0;i<sall.length;i++){
if(sall[i][1].indexOf(selvalue) != -1){
      var newOption1=new Option(sall[i][0],sall[i][2]);
    document.all.pointchange.add(newOption1);
        }
    }
    }
if(document.form1.operate.value == 7){
for(i=0;i<sall2.length;i++){
if(sall2[i][1].indexOf(selvalue) != -1){
      var newOption2=new Option(sall2[i][0],sall2[i][2]);
    document.all.pointchange.add(newOption2);
        }
    }
}
if(document.form1.operate.value == 4){
document.getElementById("td1").style.display="none";
document.getElementById("td2").style.display="block";
}
}
</script>
</head>

<body>
<form name="form1" id="form1" action="" method="post">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>   <SELECT name="operate"onChange="changeselect(document.form1.operate.options[document.form1.operate.selectedIndex].value)">
      <option value="" selected>操作</option>
      <option value="1">加分</option>
      <option value="2">精华</option>
      <option value="3">置顶</option>
      <option value="4">锁帖</option>
      <option value="5">删除</option>
      <option value="6">警告</option>
      <option value="7">扣分</option>
      </SELECT>
</td>
<td style="display:block;" id="td1">
分值加减：
      <SELECT name="pointchange">
      <option value="5">+5</option>
      <option value="4">+4</option>
      <option value="3">+3</option>
      <option value="2">+2</option>
      <option value="1">+1</option>
      <option value="0" selected>0</option>
      <option value="-1">-1</option>
      <option value="-2">-2</option>
      <option value="-3">-3</option>
      <option value="-4">-4</option>
      <option value="-5">-5</option>
      </SELECT>
      </td>
<td style="display:none;" id="td2">
截止时间：
      <SELECT name="timelimite">
      <option value="1">一天</option>
      <option value="3" selected>三天</option>
      <option value="5">五天</option>
      <option value="7">一周</option>
      <option value="14">两周</option>
      <option value="30">一个月</option>
      <option value="60">两个月</option>
      <option value="90">一季度</option>
      <option value="">不限</option>
      </SELECT>
    </td>
    </tr>
    </table>
     </form>
</body>

10 楼

lq7350684 [专家分：320] 发布于 2007-04-21 09:59:00

是不是三级联动啊?

我来回复

您尚未登录，请登录后再回复。点此登录或注册

主题：这种效果如何实现？

回复列表（共12个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

主题：这种效果如何实现？

回复列表 （共12个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

回复列表（共12个回复）