两个表单中的js执行问题

<form action="room" method="post" name="form0" id="form0">
          <input type="hidden" name="method" value=doStateEdit/>
          <input type="hidden" name="id" value=20/>
              <tr align="center" class="white">
            <td class="row">G1409 </td>
            <td class="row">一室一卫（单间） </td>
            <td class="row">44.0 </td>
            <td class="row">办公 </td>
            <td class="row">2009-04-16 13:30:53 </td>
            <td class="row"> <select name="rom.state" id="rom.state" onchange="change0()">
                    <option value="">--- </option>
                      <option value="空闲" class="green">空闲 </option>
                    <option value="入住" class="red">入住 </option>
                    <option value="长租" class="blue">长租 </option>
                    <option value="预定" class="purple">预定 </option>
                    <option value="故障" class="grey">故障 </option>
                  </select>   
  <button class="button" onClick="javascript:submit();">提交 </button>
          </td>
          </tr>
          <div id="Layer1" style="display:none">
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>从当前日期开始预订到
    <input type="text" id="destine_edntime" name="destine_edntime" onClick="calShow('destine_edntime');" onFocus="calShow('destine_edntime');" style="width:110px" />
    (YYYY-MM-DD) </p>
</div> <script language="javascript">
function change0(){
  var sel=document.getElementById("rom.state");
  var divInput=document.getElementById('Layer1');
  var index=sel.selectedIndex;
  var value=sel.options[index].value;
  if(value=='预定'){
  divInput.style.display='block';
  }
  else if(value!='预定'){
      divInput.style.display='none';
  }
}
</script>
          </form>                   <form action="room" method="post" name="form1" id="form1">
          <input type="hidden" name="method" value=doStateEdit/>
          <input type="hidden" name="id" value=22/>
              <tr align="center" class="white">
            <td class="row">G1415 </td>
            <td class="row">一室一卫一厅（单套间） </td>
            <td class="row">72.0 </td>
            <td class="row">办公 </td>
            <td class="row">2009-04-16 13:30:39 </td>
            <td class="row"> <select name="rom.state" id="rom.state" onchange="change1()">
                    <option value="">--- </option>
                      <option value="空闲" class="green">空闲 </option>
                    <option value="入住" class="red">入住 </option>
                    <option value="长租" class="blue">长租 </option>
                    <option value="预定" class="purple">预定 </option>
                    <option value="故障" class="grey">故障 </option>
                  </select>   
  <button class="button" onClick="javascript:submit();">提交 </button>
          </td>
          </tr>
          <div id="Layer1" style="display:none">
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>从当前日期开始预订到
    <input type="text" id="destine_edntime" name="destine_edntime" onClick="calShow('destine_edntime');" onFocus="calShow('destine_edntime');" style="width:110px" />
    (YYYY-MM-DD) </p>
</div> <script language="javascript">
function change1(){
  var sel=document.getElementById("rom.state");
  var divInput=document.getElementById('Layer1');
  var index=sel.selectedIndex;
  var value=sel.options[index].value;
  if(value=='预定'){
  divInput.style.display='block';
  }
  else if(value!='预定'){
      divInput.style.display='none';
  }
}
</script>
          </form>
为什么第一个表单中的js脚本可以正常执行，而第二个表单中的js脚本不能执行？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

修改见红色部分：<form action="room" method="post" name="form0" id="form0">
          <input type="hidden" name="method" value=doStateEdit/>
          <input type="hidden" name="id" value=20/>
              <tr align="center" class="white">
            <td class="row">G1409 </td>
            <td class="row">一室一卫（单间） </td>
            <td class="row">44.0 </td>
            <td class="row">办公 </td>
            <td class="row">2009-04-16 13:30:53 </td>
            <td class="row"> <select name="rom.state" id="rom.state" onchange="change0()">
                    <option value="">--- </option>
                      <option value="空闲" class="green">空闲 </option>
                    <option value="入住" class="red">入住 </option>
                    <option value="长租" class="blue">长租 </option>
                    <option value="预定" class="purple">预定 </option>
                    <option value="故障" class="grey">故障 </option>
                  </select>   
  <button class="button" onClick="javascript:submit();">提交 </button>
          </td>
          </tr>
          <div id="Layer1" style="display:none">
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>从当前日期开始预订到
    <input type="text" id="destine_edntime" name="destine_edntime" onClick="calShow('destine_edntime');" onFocus="calShow('destine_edntime');" style="width:110px" />
    (YYYY-MM-DD) </p>
</div> <script language="javascript">
function change0(){
  var sel=document.getElementById("rom.state");
  var divInput=document.getElementById('Layer1');
  var index=sel.selectedIndex;
  var value=sel.options[index].value;
  if(value=='预定'){
  divInput.style.display='block';
  }
  else if(value!='预定'){
      divInput.style.display='none';
  }
}
</script>
</form>         <form action="room" method="post" name="form1" id="form1">
          <input type="hidden" name="method" value=doStateEdit/>
          <input type="hidden" name="id" value=22/>
              <tr align="center" class="white">
            <td class="row">G1415 </td>
            <td class="row">一室一卫一厅（单套间） </td>
            <td class="row">72.0 </td>
            <td class="row">办公 </td>
            <td class="row">2009-04-16 13:30:39 </td>
            <td class="row"> <select name="rom.state2" id="rom.state2" onchange="change1()">
                    <option value="">--- </option>
                      <option value="空闲" class="green">空闲 </option>
                    <option value="入住" class="red">入住 </option>
                    <option value="长租" class="blue">长租 </option>
                    <option value="预定" class="purple">预定 </option>
                    <option value="故障" class="grey">故障 </option>
                  </select>   
  <button class="button" onClick="javascript:submit();">提交 </button>
          </td>
          </tr>
          <div id="Layer1" style="display:none">
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>从当前日期开始预订到
    <input type="text" id="destine_edntime" name="destine_edntime" onClick="calShow('destine_edntime');" onFocus="calShow('destine_edntime');" style="width:110px" />
    (YYYY-MM-DD) </p>
</div> <script language="javascript">
function change1(){
  var sel=document.getElementById("rom.state2");
  var divInput=document.getElementById('Layer1');
  var index=sel.selectedIndex;
  var value=sel.options[index].value;
  if(value=='预定'){
  divInput.style.display='block';
  }
  else if(value!='预定'){
      divInput.style.display='none';
  }
}
</script>
</form>
修改见红色和蓝色注意颜色变化部分： <form action="room" method="post" name="form0" id="form0">
          <input type="hidden" name="method" value=doStateEdit/>
          <input type="hidden" name="id" value=20/>
              <tr align="center" class="white">
            <td class="row">G1409 </td>
            <td class="row">一室一卫（单间） </td>
            <td class="row">44.0 </td>
            <td class="row">办公 </td>
            <td class="row">2009-04-16 13:30:53 </td>
            <td class="row"> <select name="rom.state" id="rom.state" onchange="change0()">
                    <option value="">--- </option>
                      <option value="空闲" class="green">空闲 </option>
                    <option value="入住" class="red">入住 </option>
                    <option value="长租" class="blue">长租 </option>
                    <option value="预定" class="purple">预定 </option>
                    <option value="故障" class="grey">故障 </option>
                  </select>   
  <button class="button" onClick="javascript:submit();">提交 </button>
          </td>
          </tr>
<div id="Layer1" style="display:none">
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>从当前日期开始预订到
    <input type="text" id="destine_edntime" name="destine_edntime" onClick="calShow('destine_edntime');" onFocus="calShow('destine_edntime');" style="width:110px" />
    (YYYY-MM-DD) </p>
</div> <script language="javascript">
function change0(){
  var sel=document.getElementById("rom.state");
  var divInput=document.getElementById('Layer1');
  var index=sel.selectedIndex;
  var value=sel.options[index].value;
  if(value=='预定'){
  divInput.style.display='block';
  }
  else if(value!='预定'){
      divInput.style.display='none';
  }
}
</script>
</form>        <form action="room" method="post" name="form1" id="form1">
          <input type="hidden" name="method" value=doStateEdit/>
          <input type="hidden" name="id" value=22/>
              <tr align="center" class="white">
            <td class="row">G1415 </td>
            <td class="row">一室一卫一厅（单套间） </td>
            <td class="row">72.0 </td>
            <td class="row">办公 </td>
            <td class="row">2009-04-16 13:30:39 </td>
            <td class="row"> <select name="rom.state2" id="rom.state2" onchange="change1()">
                    <option value="">--- </option>
                      <option value="空闲" class="green">空闲 </option>
                    <option value="入住" class="red">入住 </option>
                    <option value="长租" class="blue">长租 </option>
                    <option value="预定" class="purple">预定 </option>
                    <option value="故障" class="grey">故障 </option>
                  </select>   
  <button class="button" onClick="javascript:submit();">提交 </button>
          </td>
          </tr>
<div id="Layer2" style="display:none">
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>从当前日期开始预订到
    <input type="text" id="destine_edntime" name="destine_edntime" onClick="calShow('destine_edntime');" onFocus="calShow('destine_edntime');" style="width:110px" />
    (YYYY-MM-DD) </p>
</div> <script language="javascript">
function change1(){
  var sel=document.getElementById("rom.state2");
  var divInput=document.getElementById('Layer2');
  var index=sel.selectedIndex;
  var value=sel.options[index].value;
  if(value=='预定'){
  divInput.style.display='block';
  }
  else if(value!='预定'){
      divInput.style.display='none';
  }
}
</script>
</form>
<script language="javascript">
function change(_this){
  var divInput= _this.form.getElementsByTagName("div")[0]
  if(_this.value=='预定'){
  divInput.style.display='block';
  }
  else {
      divInput.style.display='none';
  }
}
</script>
<form action="room" method="post" name="form" id="form">
          <input type="hidden" name="method" value=doStateEdit/>
          <input type="hidden" name="id" value=20/>
     <tr align="center" class="white">
            <td class="row">G1409 </td>
            <td class="row">一室一卫（单间） </td>
            <td class="row">44.0 </td>
            <td class="row">办公 </td>
            <td class="row">2009-04-16 13:30:53 </td>
            <td class="row"> <select name="rom.state" id="rom.state" onchange="change(this)">
                    <option value="">--- </option>
                    <option value="空闲" class="green">空闲 </option>
                    <option value="入住" class="red">入住 </option>
                    <option value="长租" class="blue">长租 </option>
                    <option value="预定" class="purple">预定 </option>
                    <option value="故障" class="grey">故障 </option>
                  </select>   
  <button class="button" onClick="javascript:submit();">提交 </button>
          </td>
          </tr>
          <tr>
          <td>
          <div id="Layer" style="display:none">
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>从当前日期开始预订到
    <input type="text" id="destine_edntime" name="destine_edntime" onClick="calShow('destine_edntime');" onFocus="calShow('destine_edntime');" style="width:110px" />
    (YYYY-MM-DD) </p>
</div>
          </td>
          </tr>
          </form>
          <form action="room" method="post" name="form" id="form">
          <input type="hidden" name="method" value=doStateEdit/>
          <input type="hidden" name="id" value=22/>
              <tr align="center" class="white">
            <td class="row">G1415 </td>
            <td class="row">一室一卫一厅（单套间） </td>
            <td class="row">72.0 </td>
            <td class="row">办公 </td>
            <td class="row">2009-04-16 13:30:39 </td>
            <td class="row"> <select name="rom.state" id="rom.state" onchange="change(this)">
                    <option value="">--- </option>
                      <option value="空闲" class="green">空闲 </option>
                    <option value="入住" class="red">入住 </option>
                    <option value="长租" class="blue">长租 </option>
                    <option value="预定" class="purple">预定 </option>
                    <option value="故障" class="grey">故障 </option>
                  </select>   
  <button class="button" onClick="javascript:submit();">提交 </button>
          </td>
          </tr>
          <tr>
          <td>
          <div id="Layer" style="display:none">
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>  </p>
  <p>从当前日期开始预订到
    <input type="text" id="destine_edntime" name="destine_edntime" onClick="calShow('destine_edntime');" onFocus="calShow('destine_edntime');" style="width:110px" />
    (YYYY-MM-DD) </p>
</div>
          </td>
          </tr>
          </form>