如果以JavaScript形式聲明

Question

我對javascript很陌生，但是在HTML方面有一些經驗。 我正在嘗試創建一個表格，該表格允許我從下拉菜單中選擇一個選項，該菜單根據從下拉菜單中選擇的選項進一步擴展該表格（在同一頁面上顯示新字段）。 我認為我需要某種if語句來實現此目的，但是我似乎無法找出正確的方法來實現。 我已經可以使用下拉菜單了。 我會將我已經擁有的代碼放在這里，但是由於某種原因，它不能讓我感謝您的幫助

編輯 -通過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 name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

  <title>Ipod Inventory</title>
  <script language="JavaScript" type="text/javascript">
//<![CDATA[
  function submitSelect(form) { alert (form.reason.selectedIndex); document.body.innerHTML() = "<h3>NEW STUFF<h3>"; } 
  //]]>
  </script>
</head>

<body>
  <h3>General</h3>Employee Requesting:

  <form>
    <input type="text" name="employee" value="" />
  </form>

  <form name="myform" action="" method="get" id="myform">
    Reason: <select name="reason">
      <option>
        Conference/Meeting
      </option>

      <option>
        Loaner
      </option>
    </select> <input type="button" name="submit" value="Submit" onclick=
    "submitSelect(this.form)" /><br />
  </form>
</body>
</html>

Answer 1

您可以做的是將頁面分成不同的div部分，下拉菜單中每種情況對應一個。 然后，您可以使用來更改這些div的display屬性

element.style.display = 'none'

要么

element.style.display = 'block'

如果您的設置較為復雜，則可能需要創建一個字段列表，該字段對於組合框中的每個項目都應可見，然后使用相同的技術進行顯示/隱藏。

例如，您將有一個帶有男性和女性的下拉列表。 然后，您將不得不div元素，其id將是male或female 。 那你會用

function toggle() {
  if (document.getElementById('selector').value == 'male') {
    document.getElementById('male').style.display = 'block';
    document.getElementById('female').style.display = 'none';
  }
  else {
    document.getElementById('male').style.display = 'none';
    document.getElementById('female').style.display = 'block';  
  }
}

Answer 2

var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
 if (chosenoption.value!="nothing"){
  window.open(chosenoption.value, "", "") //open target site (based on option's value attr) in new window
 }
}

那就是您需要使用的if條件，該示例還顯示了如何綁定更改事件。.（從javascript工具包中提取的代碼段）

Answer 3

您要做的是從原因選擇框的onchange事件開始：

<select name="reason" id="reason" onchange="myFunc();">

myFunc() （對不起，這個名字我不是很有創意）將在其中顯示/隱藏其他輸入（可能不是其他形式） ，因為通常將輸入收集到頁面上的單個表格中。 每個輸入（或一組輸入）都應位於其自己的<div>標記中，然后可以使用該標記的element.style.display屬性顯示/隱藏輸入，如其他答案所述。 例如，您的表單中可能包含以下內容：

<form name="myform" action="" method="get" id="myform">
    Reason: <select name="reason" id="reason" onchange="myFunc()">
      <option>
        Conference/Meeting
      </option>
      <option>
        Loaner
      </option>
    </select> 
    <div id="conferenceInputs">
      Conference:
      <select name="conferenceSelectBox" id="conferenceSelectBox">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
    <div id="loanerInputs">
      Loaner:
      <select name="loanerSelectBox" id="loanerSelectBox">
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
    <input type="button" name="submit" value="Submit" onclick="submitSelect(this.form)" />
  </form>

myFunc() javascript看起來像這樣：

function myFunc() {
  var selectElem = document.getElementById('reason');
  var optionText = selectElem.options[selectElem.selectedIndex].text;
  switch(optionText) {
    case "Conference/Meeting":
      document.getElementById('conferenceInputs').style.display = 'block';
      document.getElementById('loanerInputs').style.display = 'none';
      break;
    case "Loaner":
      document.getElementById('loanerInputs').style.display = 'block';
      document.getElementById('conferenceInputs').style.display = 'none';
      break;
    default:
  }
}

最后，您希望有一個可在HTML頁面中加載的javascript函數- <body onload="anotherFunc()"> ，該函數將div的style.display屬性都設置為“ none”，以便它們不會出現在用戶選擇任何東西。

如果以JavaScript形式聲明

問題描述

3 個解決方案

解決方案1
2 2010-07-22 17:32:21

解決方案2
0 2010-07-22 17:29:16

解決方案3
-1 已采納 2010-07-22 18:21:54

如果以JavaScript形式聲明

問題描述

3 個解決方案

解決方案1 2 2010-07-22 17:32:21

解決方案2 0 2010-07-22 17:29:16

解決方案3 -1 已采納 2010-07-22 18:21:54

解決方案1
2 2010-07-22 17:32:21

解決方案2
0 2010-07-22 17:29:16

解決方案3
-1 已采納 2010-07-22 18:21:54