Javascript / 2014-04-18

網頁技術學習筆記 001 – 以下拉選單動態顯示欄位

綜合了這三個參考來源撰寫成：

1. 動態下拉式選單

2. javascript 利用Div顯示隱藏資訊

3. 動態的顯示或隱藏Table的Tr

可以做到，在下拉選單選擇數字後，出現相對應的欄位

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How many rows?</title>
<script ID=clientEventHandlersJS language=javascript>
function showdiv(ele)
  {
      var Value = ele.options[ele.options.selectedIndex].value;
      var sbtitle2 = document.getElementById('divtag2');
      var sbtitle3 = document.getElementById('divtag3');
      var sbtitle4 = document.getElementById('divtag4');
      var sbtitle5 = document.getElementById('divtag5');
      if ( Value == 1 )
      {
          sbtitle2.style.display = 'block';
          sbtitle3.style.display = 'none';
          sbtitle4.style.display = 'none';
          sbtitle5.style.display = 'none';
      }
      else if ( Value == 2 )
      {
          sbtitle2.style.display = 'block';
          sbtitle3.style.display = 'block';
          sbtitle4.style.display = 'none';
          sbtitle5.style.display = 'none';
      }
       else if ( Value == 3 )
      {
          sbtitle2.style.display = 'block';
          sbtitle3.style.display = 'block';
          sbtitle4.style.display = 'block';
          sbtitle5.style.display = 'none';
      }
      else if ( Value == 4 )
      {
          sbtitle2.style.display = 'block';
          sbtitle3.style.display = 'block';
          sbtitle4.style.display = 'block';
          sbtitle5.style.display = 'block';
      }

  }
</script>
</head>
<body>
How many rows?
<FORM action="" method=POST id=form1 name=form1 >
<SELECT id=select1 name=select1 LANGUAGE=javascript onChange='return showdiv(this)';>
<OPTION value=1>1</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=4>4</OPTION>
</SELECT>
<div id="divtag2" style="display: block;">
<input type="text" name="name2" size="20" class="edit">
</div>
<div id="divtag3" style="display: none;">
<input type="text" name="name3" size="20" class="edit">
</div>
<div id="divtag4" style="display: none;">
<input type="text" name="name4" size="20" class="edit">
</div>
<div id="divtag5" style="display: none;">
<input type="text" name="name5" size="20" class="edit">
</div>
<input type="submit" name="Submit" value="Send">
</body>
</html>

Leave a Reply Cancel

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。