文章/答案/技术大牛

发布

问javascript显示隐藏选择自
EN

Stack Overflow用户

提问于 2010-11-16 22:17:36

回答 2查看 2.3K关注 0票数 0

我正在尝试显示另一个选择，当用户选择一个选择时，例如，如果用户选择产品，则会出现另一个带有产品类型的选择框。以下是我的代码

<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>

javascript

html

php

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-11-16 22:25:27

我想你想要的是这样的东西

<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;
    }
}

票数 0

Stack Overflow用户

发布于 2010-11-16 22:22:53

我会把你的脚本改成这样：

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的元素之前，该元素并不存在。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4195043

复制

相似问题

问javascript显示隐藏选择自
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript显示隐藏选择自EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript显示隐藏选择自
EN