Question

我的页面中有2个div。一个在页面加载时打开，另一个在选择下拉列表项时打开。我已经为此编写了javascript，但问题出现的时候是我点击提交按钮，第一个div正在打开。

我的javascript如下：

function opendiv() {
    if ((document.getElementById("ddlistuser").value == "IP Address") && (document.getElementById("ipadd").style.display == "none"))
    {
        document.getElementById("username").style.display = "none";
        document.getElementById("ipadd").style.display = "block";
        document.getElementById("ddllist").value = "IP Address";
    } else if ((document.getElementById("ddllist").value == "Username") && (document.getElementById("username").style.display == "none"))
    {
        document.getElementById("username").style.display = "block";
        document.getElementById("ipadd").style.display = "none";
        document.getElementById("ddlistuser").value = "Username";
    }
}

Answer 1

示例HTML

<div id="one">
    <select id="myselect">
        <option>nothing</option>
        <option value="1">Something</option>
    </select>
</div>

<div id="two" style="display: none;">Hello there!!</div>

在jQuery中，您可以通过以下方式轻松实现：

$("#myselect").change(function() {
    if ($(this).val() > 0) {
        $("#two").show();
    } 
});

在这种情况下，HTML为：

这会将事件处理程序绑定到<select /> DOM元素，每次更改所选值时都会触发该元素。
在被触发的函数中，我们检查新值是否大于0（您可以执行任何条件检查）。
如果是，那么我们会在第二个div上调用show()（基本上只是将样式从display: none更改为display: block
< / LI>

继Rob的评论下面 - 在纯JavaScript中，我上面的示例可以写成：

window.showdiv2 = function (selectel) {
    if (selectel.value > 0) {
        document.getElementById('two').style.display = 'block';
    }
}

通过上述内容，您只需将select开始标记更改为onchange="showdiv2(this)"属性即可。

或者，您可以添加事件侦听器，但是您需要确保具有跨浏览器支持so check this out。

就我个人而言，我认为没有必要，因为任何JavaScript库的核心优势在于您可以从主项目代码中隐藏大块的帮助代码。但无论你喜欢什么都没关系。

如何在JavaScript中打开div onselectedindexchanged

1 个答案: