Question

我需要一些JavaScript代码来验证页面。这是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 class="sample" style="display:none;">Sample Text</div>
<input type="button" value="submit" class="inputclass" />

需要一些JavaScript代码，

当用户点击第一个或最后一个选项时，显示div并隐藏按钮
当用户点击任何链接时，隐藏div并显示按钮

P.S：

Select中的选项将从数据库动态生成。我的页面只能在JavaScript中运行，因此不需要Jquery。

请帮忙......

Answer 1

我认为这是您需要的代码：

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/

用于显示和隐藏基于选择选项的div的Javascript

1 个答案: