HTML选择下拉列表与javascript功能

HTML select dropdownlist with javascript function

本文关键字：javascript 功能 下拉列表 选择 HTML      更新时间：2023-09-26

结果如下:

<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个值)

  • 如果你点击"第一"，它应该只显示<div id="id1">的内容

  • 如果你点击"秒"，它应该只显示<div id="id2">的内容

我知道这样不行。但是我不知道怎样才能使它工作。也许有比这个javascript函数更简单的方法，但它必须是这样的

谢谢你的帮助

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

我不认为这是生产就绪的代码，但它应该足以解决您当前的问题。

相关文章：