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部分，每个部分对应一个下拉菜单。然后，您将使用

更改display个div的{{1}}属性

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条件，这个例子也说明了如何绑定change事件..（code snippet extracted from javascript kit）

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 个答案: