與javascript函數

HTML選擇下拉列表這是我迄今爲止得到：與javascript函數

<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函數更簡單的方法，但它必須這樣。

謝謝您的幫助

來源

2011-12-27 Helena

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

我不會考慮這個產品代碼，但它應該是足以解決當前的一輪問題。

來源

2011-12-27 17:31:06 ziesemer

作品。這是我正在尋找的答案。謝謝 ;） – Helena 2011-12-27 17:39:16

與javascript函數

回答

相關問題