带有 javascript 功能的 HTML 选择下拉列表答案

【问题标题】：HTML select dropdownlist with javascript function带有 javascript 功能的 HTML 选择下拉列表
【发布时间】：2012-01-28 15:52:14
【问题描述】：

这是我走了多远：

<head>
<script type="text/javascript">
function showonlyone(thechosenone) {
    var article = document.getElementsByTagName("div");
    for(var x=0; x<article.length; x++) {
        name = article[x].getAttribute("name");
        if (name == 'article') {
            if (article[x].id == thechosenone) {
                article[x].style.display = 'block';
            }
            else {
                article[x].style.display = 'none';
            }
        }
    }
}
</script>
</head>
<form>
<select>
<option SELECTED>Choose one</option>
<option value="javascript:showonlyone(id1)">First</option> <!-- That's probably wrong -->
<option value="javascript:showonlyone(id2)">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>

这是它应该做的：

创建一个下拉列表（包含 3 个值）
如果你点击“First”，它应该只显示<div id="id1">的内容
如果你点击“第二”，它应该只显示<div id="id2">的内容

我知道这不能这样工作。但我不知道我怎样才能让它工作。可能有比这个 javascript 函数更简单的方法，但它必须是这种方式。

感谢您的帮助

【问题讨论】：

标签： javascript html function drop-down-menu call

【解决方案1】：

改用 onchange 事件处理程序：

将您的 <select> 更新为 <select onchange="showonlyone(this)">。
将您的 <option> 值更改为仅 ID - 而不是 JavaScript 调用。
更新您的 JavaScript 以接受 HTMLSelectElement（将由上面的 this 传入）。（是的，你在这里是对的。）
从选定的 HTMLSelectElement 中询问其值。

这是一个固定的工作版本：http://jsfiddle.net/YRF6u/

这里也包括：

<head>
  <script type="text/javascript">
    function showonlyone(selector) {
      var thechosenone = selector.value;
      var article = document.getElementsByTagName("div");
      for(var x=0; x<article.length; x++) {
        name = article[x].getAttribute("name");
        if (name == 'article') {
          if (article[x].id == thechosenone) {
            article[x].style.display = 'block';
          }else{
            article[x].style.display = 'none';
          }
        }
      }
    }
  </script>
</head>
<form>
  <select onchange="showonlyone(this)">
    <option SELECTED>Choose one</option>
    <option value="id1">First</option>
    <option value="id2">Second</option>
  </select>
</form>
<div name="article" id="id1" style="display:none;">
  First one selected
</div>
<div name="article" id="id2" style="display:none;">
  Second one selected
</div>

我不会考虑这种生产就绪代码，但它应该足以解决您当前的问题。

【讨论】：

有效。这就是我一直在寻找的答案。谢谢;)