Question

我正在尝试显示用户从中选择选项时的其他选择，例如，如果用户选择了产品，则会出现另一个带有产品类型的选择框。这是我的代码

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>TestPage</title>

<script type="text/javascript">
function ProductSelection() {
var selectedValue = document.getElementById("internet").value;
if(selectedValue == "Matchcode")
document.getElementById("Types").style.display = "";
if(selectedValue == "Kaleidoscope")
document.getElementById("Kaleidoscopes").style.display = "";
}
</script>
</head>
<body>
<table align="center">
        <form id="form1" name="form1" method="post" action="process.php">
      <tr><td>Products</td>
      <td>
    <select name="Products" id="Products" onChange="ProductSelection();">
     <option>Select a product....</option>
        <option value="Matchcode">Matchcode</option>
        <option value="Nearcode">Nearcode</option>
        <option value="Kaleidoscope">Kaleidoscope Plus</option>
        <option value="Kaleidoscope">Matchcode Kaleidoscope</option>
      </select>
      </td>
   </tr>
   <tbody id="Types" style="display:none">
   <tr><td>Type:</td>
   <td><select name="Types" id="Types" title="Types">
   <option value="UK">UK</option>
   <option value="USA">USA</option>
   <option value="Canada">Canada</option>
   <option value="DNB">DNB</option>
   <option value="Names">Names</option>
   </select></td></tr></tbody>
   <tbody id="Kaleidoscopes" style="display:none">
   <tr><td>Type:</td>
   <td><select name="Kaleidoscopes" id="Kaleidoscopes" title="Kaleidoscopes">
   <option value="New Zealand">New Zealand</option>
   </select>
   </td></tr></tbody>


  <tr><td>Computers:</td>
  <td>
    <select name="Computers" id="Computers" title="Computers">
      <option value="QA-N1">QA-N1</option>
      <option value="QA-N2">QA-N2</option>
    </select>
 </td></tr>
 <tr>
  <td>Keys:</td>
    <td> <input name="Key" type="text" title="Key" />
     <input type="submit" name="Save" id="Save" value="Save"/>
</td>
</tr>
    </form></table>


</body>
</html>

Answer 1

我会将您的脚本更改为：

function ProductSelection(el) {
  var selectedValue = el.value;
  if(selectedValue == "Matchcode")
    document.getElementById("Types").style.display = "";
  if(selectedValue == "Kaleidoscope")
    document.getElementById("Kaleidoscopes").style.display = "";
}

并将您的输入更改为：

<select name="Products" id="Products" onChange="ProductSelection(this);">

这样，你就可以引用元素本身了。在您尝试获取ID为internet且不存在的元素之前。

Answer 2

我认为你的事情是这样的

<select name="Products" id="Products" onChange="ProductSelection(this);">

function ProductSelection(element) {
    var selectedValue = element.value
    if(selectedValue == "Matchcode") {
        document.getElementById("Types").style.display = "inline";
        document.getElementById("Kaleidoscopes").style.display = "none";
        //hide other elements that need to be hidden;
    }
    if(selectedValue == "Kaleidoscope") {
        document.getElementById("Kaleidoscopes").style.display = "inline";
        document.getElementById("Types").style.display = "none";
        //hide other elements that need to be hidden;
    }
    if(selectedValue == "Nearcode") {
        document.getElementById("Kaleidoscopes").style.display = "none";
        document.getElementById("Types").style.display = "none";
        //hide other elements that need to be hidden;
    }
}

javascript show hide选择

2 个答案: