2012-07-30 147 views
1

我需要一些JavaScript代码来验证页面。下面是HTML,基于选择选项显示和隐藏div的Javascript

<select id="sel"> 
<option value="0" selected="selected">Please select</option> 
<option value="first">Link 1</option> 
<option value="second">Link 2</option> 
<option value="third">Link 3</option> 
<option value="last">No Link</option> 
</select> 

<div class="sample" style="display:none;">Sample Text</div> 
<input type="button" value="submit" class="inputclass" /> 

需要一些JavaScript代码,

  1. 当用户点击第一个或最后一个选项,显示div和隐藏的按钮,当用户点击任何链接的
  2. ,隐藏div和显示按钮

PS:

选项中选择将GE从数据库动态调整。 我的页面只能在JavaScript中运行,因此不需要Jquery。

请帮助...

+0

@Spencer告诉我们你尝试什么JS代码使用,PLZ。这就是你在说什么 – shershen 2012-07-30 12:04:49

+0

对于2号,你在说什么?只有一个选择和一个按钮。 – Jay 2012-07-31 02:24:37

回答

2

,我认为这是代码,你需要的东西:

JS部分:

function getSelection(e) { 
    var selection = document.getElementsByTagName("option"); 
    var index=document.getElementById("sel").selectedIndex; 
    var text = document.getElementById("sample"); 
    var button = document.getElementById("input"); 
    var option=document.getElementById("sel").options; 

    if (option[index].value == "first" || option[index].value == "last") { 
     text.style.display = "block"; 
     button.style.display = "none"; 
    } else { 
     if (text.style.display != "none") { 
      text.style.display = "block"; 
      button.style.display = "none"; 
     } 
     else { 
      text.style.display = "none"; 
      button.style.display = "block"; 
     }   
    } 

    return false;  

} 



document.getElementById("input").onclick = function() { getSelection() }; 

而且HTML(我稍微修改了原来一个更有效地访问html元素):

<select id="sel"> 
<option value="0" selected="selected">Please select</option> 
<option value="first">Link 1</option> 
<option value="second">Link 2</option> 
<option value="third">Link 3</option> 
<option value="last">No Link</option> 
</select> 

<div id="sample" style="display:none;">Sample Text</div> 
<input type="button" value="submit" id="input"/>​ 

...和小提琴http://jsfiddle.net/eaRwa/2/